Question

我正在尝试创建一个函数（参见下面的itemClicked（）函数），它接受参数（'ShopFrame'元素的子元素的id） - 一个选择器，所以我不必再重复代码。

结果是.click（）函数自动启动，看起来我传入函数的参数被识别或者其他错误，即使控制台中没有任何错误。另外我可以看到'p'值我在显示的控制台日志中传递了.itemClicked（）函数而没有调用该函数。看到我认为它是在用于调用函数本身的.click（）函数之外触发

我做错了什么？这是我的完整代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="Menu">
    <ul>
        <li id="WindowShopButon" ><span class="VMenu">Windows</span></li>
        <li id="DoorShopButon"  title="#DoorShopCode"> <span class="VMenu">Doors</span></li>
        <li id ="BlindsShopButon"><span class="VMenu">Blinds</span></li>
        <li id="OptionsShopButon"> <span class="VMenu">Options</span></li>
    </ul>
</div>

<div id="ShopFrame">
    <p class="shop activeShop" id="MainShop">I am MainShop</p>
    <p class="shop" id="WindowsShopCode" >  I am WindowsShopCode</p>
    <p class="shop" id="DoorShopCode">I am DoorShopCode</p>
    <p class="shop" id="BlindsShopCode">I am BlindsShopCode</p>
    <p class="shop" id="OptionsShopCode">I am OptionsShopCode</p>
</div>


<script type="text/javascript">

    function hoverItem() {
        $(this).toggleClass("hover")
        };
 var p = '';
    function itemClicked(p){
        $('.VMenu').removeClass("active");
        $(this).addClass("active");
        $("#MainShop").remove();
        $('.shop').removeClass("activeShop");
        $(p).addClass("activeShop");
        console.log(p);
    }


$( document ).ready(function() {
    console.log( "ready!" );
        $("#WindowShopButon span.VMenu")
        .click(function() {
            $('.VMenu').removeClass("active");
            $(this).addClass("active");

            $("#MainShop").remove();
            $('.shop').removeClass("activeShop");
            $("#WindowsShopCode").addClass("activeShop");
        })

        .hover(hoverItem); 

    $("#DoorShopButon span.VMenu").hover(hoverItem).click(itemClicked('#DoorShopCod')); 


$("#BlindsShopButon span.VMenu").click(function() {

$('.VMenu').removeClass("active");
$(this).addClass("active");

$("#MainShop").remove();
$('.shop').removeClass("activeShop");
$("#BlindsShopCode").addClass("activeShop");

})
    .hover(hoverItem); 


$("#OptionsShopButon span.VMenu").click(function() {

$('.VMenu').removeClass("active");
$(this).addClass("active");

$("#MainShop").remove();
$('.shop').removeClass("activeShop");
$("#OptionsShopCode").addClass("activeShop");
})
    .hover(hoverItem); 
});

</script>
<style>
    .activeShop{display: block
        !important;}
    .inactiveShop{display: none!important;}
    .active, .hover{
    border-bottom: #6ba1b2 1.5px solid;
    padding-bottom: 5px;
    cursor: pointer;
    }
</style>

谢谢！

Answer 1

我想通了：我必须将itemClicked（）包装成一个匿名函数，如下所示：

  $("#DoorShopButon span.VMenu").hover(hoverItem).click(function(){
        itemClicked('#DoorShopCode');
    });

而不是：

$("#DoorShopButon span.VMenu").hover(hoverItem).click(itemClicked('#DoorShopCode'));

至少显然代码更改阻止了.click（）函数表单在Document Load上自动启动。

感谢大家提供的提示和问题，如果没有他们的评论，我将无法找到成功的解决方案。特别感谢@JJJ和@JulioPérez。我希望我能给你一个投票，但我的声誉不允许我这样做。或者至少在我看来是那样的。

干杯！

为什么jQuery .click（）会自动启动？

1 个答案: