Question

当用户在div上盘旋时，我想在两个图像之间切换。有办法吗？
我可以使用每次悬停div时更新的布尔标志，然后使用此标志切换图像吗？如果这是正确的方法，有人可以告诉我吗？

以下是代码：

$(document).ready(function(){
        $('.my-element').on('mouseenter', function () {             
            $('img#element_1').attr({
                'src': 'img/../element 1.png'
            });             
        });     
    });

我第一次将鼠标悬停在div上时应该切换我的图像。下一次图像切换是指我的鼠标再次悬停div时，而不是鼠标在第一次切换后离开时。

Answer 1

所以我在这里解决了这个问题。我刚刚使用了一个布尔辅助变量。我首先宣称是真的。

var myHelper = true;

然后我用条件检查if (myHelper) then $().attr 另一个条件是我检查if (!myHelper) then ..

在脚本的最后我放myHelper = !myHelper所以它总是切换

有效。

Answer 2

您可以采取两种方法。您可以在此处查看相同的操作：https://jsfiddle.net/q4z7o4ry/2/（请确保您在左下角的框中使用JavaScript + jQuery）

如果您有html：

var mobileNum = $(this).val();
var validateMobNum= /^\d*(?:\.\d{1,2})?$/;
if (validateMobNum.test(mobileNum ) && mobileNum.length == 10) {
    alert("Valid Mobile Number");
}
else {
    alert("Invalid Mobile Number");
}

JavaScript / Jquery代码：

<div class="my-element" style="border: 1px solid red; width:150px; margin-bottom: 20px;">
  <img id="element_1" src="https://www.vectorlogo.zone/logos/javascript/javascript-card.png" height="150" width="150" />
</div>

或者你可以在div中有两个图像并一次显示其中一个。 HTML代码如下所示：

$(document).ready(function(){
  $('.my-element').on('mouseenter', function () {
    var img1 = 'https://www.vectorlogo.zone/logos/javascript/javascript-card.png';
    var img2 = 'https://brand.jquery.org/resources/jquery-mark-light.gif';
    var curr_src = $('img#element_1').attr('src');
    var toggled_src = curr_src == img1 ? img2 : img1;
    $('img#element_1').attr('src', toggled_src);
  });
});

JavaScript / JQuery代码就像：

<div class="my-element1" style="border: 1px solid red; width:150px;">
  <img id="element_2" src="https://www.vectorlogo.zone/logos/javascript/javascript-card.png" height="150" width="150" />
  <img id="element_3" src="https://brand.jquery.org/resources/jquery-mark-light.gif" height="150" width="150" style="display:none;" />
</div>

希望这有帮助。

如何在jquery

2 个答案: