小编kat*_*son的帖子

JQuery - 在悬停时替换图像

我有一个图像文件夹.在这个文件夹中,我有两种类型的图像; 一个png一个gif.显示的图像是png版本.在图像悬停时,我需要将其替换为其gif版本.当悬停时,将png版本放回原位.

我目前有以下工作

$(".image-container").mouseover(function () {
    var imgName = $(this).find('img').attr('src');
    var img2 = imgName.substring(0, imgName.lastIndexOf("."));
    $(this).find('img').attr("src", img2+".gif");
}).mouseout(function () {
    var imgName = $(this).find('img').attr('src');
    var img2 = imgName.substring(0, imgName.lastIndexOf("."));
    $(this).find('img').attr("src", img2+".png");
});
Run Code Online (Sandbox Code Playgroud)

它有效,但我不喜欢我重复的方式.有没有办法让这个更有效率?

谢谢

jquery

4
推荐指数
2
解决办法
1万
查看次数

JQuery Swiper滑动高度

我正在使用JQuery Swiper.我基本上有一个部分,我将高度设置为视口高度.

#portfolio {
  height: 100vh;
}
Run Code Online (Sandbox Code Playgroud)

在这一节中,我有一个左侧和一个右侧,我设置为100%

#portfolio-left {
    background: #6bbea5 none repeat scroll 0 0;
    height: 100%;
}

#portfolio-right {
    height: 100%;
    padding: 0;
}
Run Code Online (Sandbox Code Playgroud)

#portfolio-left将只保留一个小文本,同时#portfolio-right将保持我的滑块.

所以我添加了我的滑块容器,以及我想要添加到滑块的内容.我然后设置它

$(function() {

     var swiperH = new Swiper('.swiper-container-h', {
        pagination: '.swiper-pagination-h',
        paginationClickable: true
    });
    var swiperV = new Swiper('.swiper-container-v', {
        pagination: '.swiper-pagination-v',
        paginationClickable: true,
        direction: 'vertical',
        freeMode: true,
        autoHeight: true,
        grabCursor: true
    });
});
Run Code Online (Sandbox Code Playgroud)

它最终将是双向的,因此我有垂直和水平的原因.我已经垂直添加了两张幻灯片来演示我的问题.从本质上讲,第一张幻灯片有很多内容,并没有给出动态高度.我认为这与在投资组合中给予100%高度有关,但不太确定.我已经设置了一个JSFiddle来演示.

如何让幻灯片具有自动高度,同时整个部分为100vh?

这是我所追求的一个例子 例

非常感谢

css jquery jquery-plugins swiper

4
推荐指数
1
解决办法
6287
查看次数

在 Guzzle 中复制 cURL 帖子

我使用 cURL 将数据发布到 API,但已决定切换到 Guzzle。使用 cURL 我会这样做

$data = 
"<Lead>
  <Name>$newProject->projectName</Name>
  <Description>$newProject->projectName</Description>
  <EstimatedValue>$newProject->projectValue</EstimatedValue>
</Lead>";

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, "https://api.someurl.com/lead.api/add?apiKey=12345&accountKey=12345");
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "POST");
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
curl_setopt($ch, CURLOPT_HEADER, false);
curl_setopt($ch, CURLOPT_HTTPHEADER, array(
    'Content-Type: text/xml',
    'Content-Length: ' . strlen($data)
));

$output = curl_exec($ch);
Run Code Online (Sandbox Code Playgroud)

这就是我目前正在尝试使用 Guzzle 的方法。

$data = "<Lead>
            <Name>$campaign->campaignName</Name>
            <Description>$campaign->campaignName</Description>
            <EstimatedValue>$campaign->campaignValue</EstimatedValue>
          </Lead>";

$client = new GuzzleHttp\Client();
$req = $client->request('POST', 'https://somurl', [
    'body' => $data,
    'headers' => [
        'Content-Type' => 'text/xml',
        'Content-Length' => strlen($data),
    ] …
Run Code Online (Sandbox Code Playgroud)

php guzzle laravel-5.2

3
推荐指数
1
解决办法
9870
查看次数

使 flexbox 在 IE11 中工作

我知道有类似的问题,但我已经尝试了所有的建议,但仍然无法正常工作。我正在使用 Bootstrap,我有一个高度为 100vh 的部分。在本节中,我有两行,第二行我需要放置在该节的最底部,但不想使用绝对定位。因此,我使用了 flex 系统。

我的布局是这样的

.mn120 {
  min-height: 120px;
}

img {
  max-width: 40%;
}

.mh100vh {
  min-height: 900px;
}

.col-md-4 {
  margin-top: auto;
}
Run Code Online (Sandbox Code Playgroud)
<section id="someSection" class="section">
  <div class="container d-flex flex-column justify-content-between fHeight mh100vh">
	<div class="row">
	  <div class="col-md-8 offset-2">
		<h2 class="section-title">Header Text</h2>
		<p class="section-subtitle">
		  Some Text
		</p>
	  </div>
	</div>
	<div class="row d-flex fHeight">
	  <div class="col-md-4">
		<img class="btmImg" src="data:image/png;base64,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" alt="" />
	  </div>
	  <div class="col-md-8">
		<img class="btmImg" src="http://www.atfund.gatech.edu/sites/default/files/images/verticalplaceholderimage-440x680.png" alt="" />
	  </div>
	</div>
  </div>
</section>
Run Code Online (Sandbox Code Playgroud)

我使用了很多 Bootstrap 类来帮助我实现这种布局。为了演示这个问题,我已将部分的高度更改为 900px 而不是 …

css flexbox twitter-bootstrap internet-explorer-11

3
推荐指数
1
解决办法
2万
查看次数

将Javascript对象格式化为新数组

我在以所需方式格式化数据时遇到一些问题。目前,我有一个空函数

populateAddresses(data) {
    console.log(JSON.stringify(data))
}
Run Code Online (Sandbox Code Playgroud)

这将输出采用以下格式的完整数据

{
  "county": "WEST MIDLANDS",
  "town": "SOLIHULL",
  "streets": [
    {
      "name": "MARSLAND ROAD",
      "numbers": [
        {
          "buildingNumberOrName": "1",
          "buildingName": "",
          "subBuildingName": "",
          "buildingNumber": "1"
        },
        {
          "buildingNumberOrName": "3",
          "buildingName": "",
          "subBuildingName": "",
          "buildingNumber": "3"
        }
      ]
    }
  ],
  "postcode": "B92 7BU"
}
Run Code Online (Sandbox Code Playgroud)

因此,它基本上是邮政编码的地址。我想做的是创建一个完整的地址数组。所以对于上面的例子,我的数组将是这样的

["1 MARSLAND ROAD, SOLIHULL, WEST MIDLANDS, B92 7BU", "3 MARSLAND ROAD, SOLIHULL, WEST MIDLANDS, B92 7BU"]
Run Code Online (Sandbox Code Playgroud)

因此它将是buildingNumberOrName +街道名称,然后是城镇,县和邮政编码。可能会有不止一条街道,这可能会使事情进一步复杂化吗?

我正在考虑也许循环对象以获取信息,例如

Object.keys(data).forEach(key => {

});
Run Code Online (Sandbox Code Playgroud)

但是后来我认为我将不得不经历许多内部循环。我已经看到了映射,但是不确定如何在这里使用它?

任何建议表示赞赏。

谢谢

javascript arrays javascript-objects

3
推荐指数
1
解决办法
58
查看次数

在单个页面上处理多个表单

我有一个带有选择选项的页面

<div class="col-md-7">
    <select class="selection" name="selection">
        <option value="ab">Form One</option>
        <option value="ad">Form Two</option>
        <option value="nq">Form Three</option>
    </select>
</div>

<div id="content"></div>
Run Code Online (Sandbox Code Playgroud)

对于我的 JQuery,我只是监听变化

$(".selection").on("change", function(e){
    if($(this).val() == "ad"){
        $("#content").append(data);
    }
});
Run Code Online (Sandbox Code Playgroud)

现在,在这个刀片模板所在的位置(资源/视图/客户),我创建了一个表单文件夹。此文件夹中包含 form1.blade.php 和用于其他表单的另外两个模板。

我该如何将表单模板添加到带有 id 内容的 div 中?

或者有没有更好的方法来处理单个页面的多个表单?

laravel-5

2
推荐指数
1
解决办法
2万
查看次数

Javascript/html保持url params

说我给某人提供了一个链接到我的页面,如下所示

www.linkone.com?something=ten

当他们访问该页面时,该页面的URL将显示该参数.如果在那个页面上我有一个像这样的链接

<a href="linktwo.html"> Link Two </a>
Run Code Online (Sandbox Code Playgroud)

当他们点击它时,Link Two的网址看起来就像

www.linkone.com/linktwo.html

有没有办法将第一个链接中的参数添加到页面中的任何其他链接?因此,当他们访问Link Two时,我想以url结束

www.linkone.com/linktwo.html?something=ten

我知道这可能是通过javascript,但主页上有很多链接到网站内的其他页面,我需要在所有链接上进行参数.实现这一目标的最佳方法是什么?

谢谢

html javascript jquery

2
推荐指数
1
解决办法
1286
查看次数

PHP与0交换0

我得到以下变量

$inputMobile = $_POST["inputMobile"];
Run Code Online (Sandbox Code Playgroud)

现在数字可以有多种方式,例如

07714....
+447714...
00447714...
Run Code Online (Sandbox Code Playgroud)

我需要做的是确保无论我得到什么数字,我都会将其更改为以+44开头.我有这样的事情

$inputMobile = $_POST["inputMobile"];
    if (substr($inputMobile, 0, 1) === '+44') { 
        $inputMobile = $_POST["inputMobile"];
    }
    else {
        $inputMobile = preg_replace('/^0?/', '+44', $inputMobile);
    }
Run Code Online (Sandbox Code Playgroud)

问题是,如果我给它一个像+447714的数字,它返回+ 44 + 44714.

我怎么能阻止这种情况发生?

谢谢

php regex preg-replace phone-number

1
推荐指数
1
解决办法
317
查看次数

为库存控制设计数据库

我的数据库设计有一些问题。我的系统设计如下图 在此处输入图片说明

正如你所看到的,它是一个非常基本的系统。用户可以通过添加供应商详细信息来创建供应商。然后,用户可以添加产品并将其链接到供应商。这就是非常直接的一点(我希望!)。现在我将附上我的数据库设计,希望能涵盖我提到的内容。 在此处输入图片说明

因此,一个供应商可以有一个联系人(我的系统用户将联系的供应商公司内的人),一个供应商可以有一对多的产品。

他是我想不通的部分。每周两次,我系统的用户将收到所有供应商的库存。当他们收到此库存时,他们应该进入应用程序中的更新库存屏幕并输入他们收到的特定产品的库存数量。我添加了一个 products_stock 表,希望它能让我开始介绍这方面的内容(不过我认为它遗漏了很多)。

然而,最后一个屏幕是预测库存的显示。例如,在我的产品交付当天,我收到了 10 件产品一。然后我将手动计算我从最后一个产品一订单(比如 2)中剩余的数量并将产品一的库存数量更新为 12。这意味着,实际上,在两次交付之间我只需要 8 个单位产品一。预测库存屏幕应该显示在指定时间段内我应该为特定产品下订单的预测库存水平。因此,如果 8 件是每周产品一的平均销售量,如果我想查看我应该为一个月的产品一订购多少件,它应该显示大约 32 件。

这不应该是一个复杂的系统,它应该具有手动方面的内容。我一直在设计数据库,我希望我能得到一些关于 products_stock 表的建议,以及我如何处理特定时间段的库存预测(如果我可能需要额外的表)。

任何建议表示赞赏。

谢谢

database database-design

1
推荐指数
1
解决办法
5660
查看次数

使用 Sinon 来模拟服务模块

我已经进入了单元测试阶段,说实话,网上所有不同的例子让我感到困惑。我对Mocha & Chai很了解,但Sinon却是另一回事。

所以我有一个我认为非常简单的设置。我有一个调用控制器的 POST 路由。这个控制器就像这样(删除了一些基本的验证代码)

const { createUser } = require('../services/user.service');

const apiResponse = require('../helpers/apiResponse');

const postUser = async (req, res) => {
    const user = {
      account_id: req.body.id,
      status: req.body.status,
      created_at: new Date(),
      updated_at: new Date(),
    };

    const result = await createUser(user);
    return apiResponse.successResponseWithData(res, 'User added.', result.affectedRows);
  } catch (err) {
    return apiResponse.errorResponse(res, err);
  }
};

module.exports = {
  postUser,
};
Run Code Online (Sandbox Code Playgroud)

所以它真正做的就是验证,然后使用 req 创建一个用户对象并将其传递给服务类。该服务类只是将数据传递给数据库类。

const { addUserToDb } = require('../database/user.db');

const createUser = async (user) => {
  try …
Run Code Online (Sandbox Code Playgroud)

unit-testing node.js sinon sinon-chai

1
推荐指数
1
解决办法
3011
查看次数