Jquery .ToggleClass不是'；t在第一次单击时运行

我的php脚本为一个图像添加了一个隐藏的复选框。单击图像时，其复选框设置为选中。然后，我想在图像周围放置一个轮廓，以显示选中的图像，而无需显示丑陋的复选框。为此，我创建了一个名为$i的php变量，它为每个输出的图像递增，作为图像id，然后将该id传递到Javascript函数中，并作为jquery选择器调用

所有这些都很好，但当toggleClass事件被称为act时，我从未体验过这种方式。它不会在第一次单击时触发，但第二次单击会导致图像的高亮显示与复选框的选中不同步，即

图像>单击=未选中突出显示| |复选框

图像>第二次单击=图像高亮显示| |复选框未选中

如果addClass事件被调用，那么它将工作，在第一次单击时高亮显示。但当重写以删除第二次单击时的突出显示时，原来的问题又回来了。（我使用带有.hasClass（）的if-else语句实现了这一点，if让类“highlight”将其删除，else addclass highlight…）

变量似乎没有问题，因为在HTML&JS中用数字1替换这些变量仍然存在问题

下面是我正在使用的代码：

（例如，假设php变量$i为1，因为当这部分工作正常时，为循环ect编写代码似乎没有意义[还有href=“”当单击按钮时，将阻止跟踪锚点的位置，从而使高亮显示成为可能，此代码尚未编写，因此不会引起问题，我只是删除了href=''以进行测试]）

HTML/PHP

// for this exmaple $i = 1;
// $id is the images unique id, the one used in the server for the image path


<a class='selectbox' id='hil' style='position:relative;' href='show-image.php?id=$id'>
    <div style='display:inline-block; padding:15px;' id=\"$i\" onclick=\"highlight('" . $i . "')\"  class='lifted drop-shadow-sq' >
        <label for=\"$id\">
            <img class='reflect reflect-br' width='150px;' height='150px' src=\"thumb.php?id=$id\">
        </label>
            <input id=\"$id\" style='display:non;' type='checkbox' class=\"show-man\" name='images[]' value='$id'>
    </div>
</a>

CSS

感谢您提前回复。

您的

highlight（）

函数正在将单击事件绑定到div元素。因此，第一次单击将绑定事件，第二次单击将实际执行代码。你可以用两种方式改变它

因为您正在使用

onclick

属性，所以可以将highlight函数更改为如下所示

function highlight(x) { 
  id = x;
  $('#' + id).toggleClass('highlight');
}

或者在页面加载该属性后删除

onclick

属性和绑定事件（我假设所有div都提升了类）

$(document).ready(function(){
  $('.lifted').on('click', function(){
    $(this).toggleClass('highlight');
  });
});

您的

highlight（）

函数正在将一个click事件绑定到div元素。因此，第一个click将绑定该事件，第二个click将实际执行代码。您可以通过两种方式对其进行更改

因为您正在使用

onclick

属性，所以可以将highlight函数更改为如下所示

function highlight(x) { 
  id = x;
  $('#' + id).toggleClass('highlight');
}

或者在页面加载该属性后删除

onclick

属性和绑定事件（我假设所有div都提升了类）

$(document).ready(function(){
  $('.lifted').on('click', function(){
    $(this).toggleClass('highlight');
  });
});

---

是的，经过几个小时的挠头和拉扯头发，我找到了一个解决方案。似乎是我用来检查和取消检查复选框导致了这个问题。但不确定为什么

因此，我删除了它，并为突出显示创建了一个简单的Jquery函数（要归功于Zefiryn，这是对他的回答的一个轻微修改）

然后，我从html中删除了标记，并用JavaScript函数替换它们，使用复选框id中的images unique id来选中/取消选中复选框

<div style='display:inline-block; padding:15px;' id=\"$i\" onclick=\"if (event.target.tagName != 'INPUT') document.getElementById('$id').checked = !document.getElementById('$id').checked\"  class='lifted drop-shadow-sq' >
    <img class='reflect reflect-br' width='150px;' height='150px' src=\"thumb.php?id=$id\">
        <input id=\"$id\" style='display:none;' type='checkbox' class=\"show-man\" name='images[]' value='$id'>
</div>

css保持不变

---

现在一切似乎都已安排妥当，工作正常。最后，我必须感谢Zefiryn提供的上述帮助。

好的，经过几个小时的搔头和拔头发，我找到了一个解决方案。似乎是我用来检查和取消检查复选框的复选框导致了问题。但不确定为什么

因此，我删除了它，并为突出显示创建了一个简单的Jquery函数（要归功于Zefiryn，这是对他的回答的一个轻微修改）

然后，我从html中删除了标记，并用JavaScript函数替换它们，使用复选框id中的images unique id来选中/取消选中复选框

<div style='display:inline-block; padding:15px;' id=\"$i\" onclick=\"if (event.target.tagName != 'INPUT') document.getElementById('$id').checked = !document.getElementById('$id').checked\"  class='lifted drop-shadow-sq' >
    <img class='reflect reflect-br' width='150px;' height='150px' src=\"thumb.php?id=$id\">
        <input id=\"$id\" style='display:none;' type='checkbox' class=\"show-man\" name='images[]' value='$id'>
</div>

css保持不变

---

现在一切似乎都已整理好，工作正常，最后我必须感谢Zefiryn提供的上述帮助。

同意，不要使用onclick-这被称为“突兀”，正如我建议的那样，我试图实现上面的后一个答案，导致了另一次失败。on没有启动，因此我将其更改为.live，现在它工作正常，但前提是我只添加了一个class，toggleClass事件不会做虚假的下蹲吗？下面是JSFIDLE来展示它的工作原理：。您可能有问题，您绑定的div事件的父级是一个锚，所以单击将使它执行锚的标准操作。为所有答案欢呼，但解决了问题。这和导致它下蹲的原因有关去散点。我将把解决方案放在下面。同意，不要使用onclick-这被称为“突兀”，正如我建议的那样，我试图实现上面的后一个答案，导致了另一个失败。on没有启动，所以我将其更改为。live，现在这很好，但只有在我只添加了一个类的情况下，toggleClass事件才不会执行diddy Shunk？下面是JSFIDLE演示它的工作原理：。您可能会遇到这样的问题：您绑定的div事件的父级是一个锚，所以单击将使它执行锚的标准操作。为所有答案干杯，但解决了这个问题。这和导致它散乱有关。我将在下面列出解决方案。