Question

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

所有这一切都很好，但是当调用toggleClass事件时，它以我以前从未体验过的方式行事。它不会在第一次点击时触发，但是第二次点击导致图像的突出显示与复选框的检查不同步，即

图片＆gt; click =没有高亮显示||选中复选框。

图片＆gt;第二次点击=图像突出显示||复选框未经检查。

如果调用addClass事件，那么它将起作用，在第一次单击时突出显示。但是当重写以在第二次单击时删除突出显示时，原始问题又回来了。（我使用带有.hasClass（）的if else语句，如果让类'突出'删除它，否则addclass突出显示...）

变量似乎没有问题，因为用HTML＆amp;中的数字1替换它们。 JS问题依然存在。

正确使用我正在使用的代码：

（例如，假设php var $ i为1，因为当这部分工作正常时，写出for循环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>

Jquery的

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

CSS

.highlight img {
box-shadow:0 0 10px #5bb1ce;
}

感谢您提前回复。

Answer 1

您的highlight()函数将click事件绑定到div元素。因此，首先单击将绑定事件，第二个将实际执行代码。你可以用两种方式改变它

由于你是uisng onclick属性，你可以改变高亮显示功能看起来像这样

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

或者在页面加载后删除onclick属性和绑定事件（我假设所有div都已提升类

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

Answer 2

对，经过几个小时的头部刮伤和拔毛后，我已经找到了解决方案。似乎我用来检查和取消选中复选框导致问题。不确定为什么呢？

所以我删除了它并为突出显示创建了一个简单的Jquery函数。（为了归功于Zefiryn，这是对他回复的一点修改。）

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

然后我从html中删除了标签，并使用JavaScript函数替换它们，使用复选框id中的images唯一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的上述帮助。

第一次单击时没有运行.ToggleClass

2 个答案: