Question

我有一个由PHP作为HTML生成的图像网格。单击图像时，我希望能够标记为单击，并执行一些操作，例如将其添加到clickedArray []数组中，更改一些HTML以显示clickedArray.length，并创建一个覆盖图像的图像顶部出现。如果它再次被点击，基本上是相反的。我在这里有这个代码：

$("img").click(function() { $(this).attr("selected", "true"); });

尽管如此，我无法给我的图片id=，因为它似乎打破了HTML并且图像不会出现，所以我认为这会影响整个事情。如果它有帮助，这就是HTML：

<img src= '$link[Image_Link] . /133x100' title='$row[Item_Name]' alt='$just_name' onClick='addValue(". $credit_value .")' border=0 style='position: relative; top: 0; left: 0;'/>

我想发布更多我尝试过的jquery代码，但我知道它不对。我想要它做的是每次点击图像，从true＆lt; - ＆gt; false更改它的所选属性，从clickArray添加或删除它，并更改HTML元素，我不确定虽然如何去做。

Answer 1

Working Example

您可以使用数据属性将图像标记为已选中。您还可以添加一个类来直观地显示它已被选中。

 $('img').click(function () {
    if ($(this).data('selected')) {
        $(this).removeClass('selected');
        $(this).data('selected', false);
    } else {
        $(this).addClass('selected');
        $(this).data('selected', true);
    }
});

您可以声明一个数组，并通过使用jquery选择器迭代一个集合来向其添加项目：

var selectedImageArray = [];
$('img').each(function () {
    if ($(this).data('selected')) {
        selectedImageArray.push(this.id);
    }
});

您可以使用.length获取selectedImageArray长度，并使用.text()将其输出到html元素（例如span），如下所示：

<span id="selectedItemsSpan">Selected Items:</span>

<script>
    $('#selectedItemsSpan').text('You have selected the following ' + selectedImageArray.length + ' items.');
</script>

Answer 2

尝试使用data属性而不是selected =“true”（https://api.jquery.com/data/）

即

$('img').on('click', function() {
    $(this).data('selected',true);
}

Jquery检查是否选择了图像

2 个答案: