为什么 jQuery .click() 会自动启动？

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() 函数表单在加载文档时自动启动。

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

伙计们干杯！

为什么 jQuery .click() 会自动启动？

why is jQuery .click() automatically firing up?

parameters

jquery

function

selector