与jQuery切换冲突（）

Question

我正在建立一个健身网站，用户可以点击图片上的肌肉群，然后选择一个子弹点，反之亦然。这是一张照片;

我有两个jQuery函数，一个用于在单击图片时触发项目符号，另一个用于在单击项目符号时触发图片。它们都是单独工作，但不是在它们共存时。

此刻，当您点击“胸部”复选框时，它会亮起并在图片上显示胸部高光，这样就可以了。但是，当您单击图片上的胸部选择器时，它不会切换图片突出显示，但会更改复选框。有什么想法吗？

找到以下“胸部”的代码

HTML

<!-- picture -->
<h1>Generate your workout</h1>
        <div id="anatomy">
            <div id="anatomy-highlights">
                <img id="img-anatomy-chest-check" src="img/workout-selection/anatomy-shoulders.png"/>
            </div>
          <div id="anatomy-chest" class="l highlight"></div>
          <img src="img/anatomy.png" style="float:left; padding-right:20px;"/>
        </div>


<!-- CHECKBOX -->
<div class="custom-check">
    <input class="body-part" type="checkbox" id="anatomy-chest-check"/>
    <label for="anatomy-chest-check"></label>
    </div>
    Chest

CSS

#anatomy-highlights img{
    position:absolute;
    top:0;
    left:0;
    display:none;
}

JQUERY

/* LINK PICTURE AND BODY PART CHECK BOXES*/

$(".highlight").click(function(){
    $("#anatomy-highlights #img-" + this.id + "-check").toggle();
    $("#" + this.id + "-check").trigger('click');
});

/* LINK BODY PART CHECK BOXES TO PICTURE*/

$(".body-part").click(function(){
    $("#anatomy-highlights #img-" + this.id).toggle();
});

Answer 1

它无效，因为您拨打toggle()两次：

1. 用户点击.highlight，您拨打toggle()，然后在复选框上点击trigger('click')
2. 复选框点击处理程序，第二次调用toggle()

只需从toggle()点击处理程序中移除.highlight来电。