单击时获取图像 ID 并将其设置为变量

Getting image id on click and set it as variable

本文关键字：设置 变量 获取 图像 ID 单击      更新时间：2023-09-26

我在列表中有几张图片：

    <div id="accordion">
                <h3><a href="#">Screen Category:</a></h3>
            <div>
                <ul class="filters">
                    <li><img src="img/icons/filters/new/communicate.png" title="" alt="" id="categoryAdvertising" /></li>
                    <li><img src="img/icons/filters/new/info.png" title="" alt="" id="categoryInformation" /></li>
                    <li><img src="img/icons/filters/new/communicate.png" title="" alt="" id="categoryACA" /></li>
                    <li><img src="img/icons/filters/new/entertainment.png" title="" alt="" id="categoryEntertainment" /></li>
                    <li><img src="img/icons/filters/new/communicate.png" title="" alt="" id="categoryInfluencing" /></li>
                    <li><img src="img/icons/filters/new/communicate.png" title="" alt="" id="categoryICE" /></li>
                    <li><img src="img/icons/filters/new/communicate.png" title="" alt="" id="categoryCommunication" /></li>
                    <li><img src="img/icons/filters/new/communicate.png" title="" alt="" id="categoryParticipation" /></li>
                </ul>
            </div>
                <h3><a href="#">Screen Type:</a></h3>
            <div>
                <ul class="filters">
                    <li><img src="img/icons/filters/new/communicate.png" title="" alt="" /></li>
                    <li><img src="img/icons/filters/new/info.png" title="" alt="" /></li>
                </ul>
            </div>
</div>

我正在尝试在单击图像然后淡出时获取图像ID。我还有一个与图像 id 相同的布尔变量，如果它是假的，我想将其设置为 true。

如果与图像 id 相同的变量已经为 true，那么我想将其设置为 false 并淡出图像。

不幸的是，我的点击功能根本无法正常工作。

这是我到目前为止所拥有的：

$("img.filters").click(function () {
alert("clicked");
    var id = ($(this).attr('id'));
    $('#' + id).fadeTo("slow", 1.00);
});

由于它根本不起作用，我猜我对元素做错了什么。

提前感谢您的帮助！

与其捕获 img id，不如简单地使用 this ：

使用 on 方法可以在绑定事件后添加元素。

$(document).on("click", ".filters img", function() { 
    alert("clicked");
    $(this).fadeTo("slow", 1);
});

关于您的变量，您可以在对象中更改它们吗？

var vars = {
    categoryAdvertising: false,
    categoryInformation: false
};

然后，您可以使用以下内容切换它们：(在点击事件中(

vars[this.id] = !vars[this.id];

this是指单击的 DOM 元素。因此，您可以使用this.id简单地捕获id

请参阅：http://jsperf.com/jquery-attr-id-vs-this-id

注意：

Se !运算符工作得多么好。

!true is false
!false is true

如果您将click事件绑定在 li 标记上，就像我稍后会做的那样。您可以使用以下方法捕获 ID：

$(this).children("img")[0].id

或

$(this).children("img").attr("id");

您只想淡入淡出切换图像？您可以使用淡入淡出切换

$(document).on("click", ".filters img", function() { 
   alert("clicked");
   $(this).fadeToggle("slow");
});

这里的问题是，当图像被隐藏时，它会display:none;，因此无法再次单击：http://jsfiddle.net/jJDvc/1/

解决方法可以是将单击事件绑定到其父级(li 元素(上：http://jsfiddle.net/jJDvc/2/

$(document).on("click", ".filters li", function() {
   $(this).children("img").fadeToggle("slow");
});

然后也为父母提供一些风格。

li {
    height:100px;
    width:100px;
}

希望这能回答您的许多问题。

你的选择器是错误的，应该是

$(".filters img").click(function () { 
alert("clicked"); 
    var id = ($(this).attr('id')); 
    $('#' + id).fadeTo("slow", 1.00); 
});

您的选择器应该是：

$(".filters img").click(function () {
    alert("clicked");
    var id = ($(this).attr('id'));
    $('#' + id).fadeTo("slow", 1.00);
});

尝试：

$(".filters img").live('click',function () {
  alert("clicked");
  $(this).fadeTo("slow", 1.00);
  return false;
});

或者为要触发事件的图像创建一个类，并按该类选择它们。 假设新类是".clicking-images"：

$(".clicking-images").live('click',function () {
  alert("clicked");
  $(this).fadeTo("slow", 1.00);
  return false;
});

在你的jquery代码中，你给出了img.filter，这意味着img标签，类名作为过滤器，但在你的html中没有带有类名过滤器的img标签，所以改变你的代码，

如下所示 
$(".filters li img").click(function () {
alert("clicked");
     $(this).fadeTo("slow", 1.00);
});

希望这能解决您的问题

单击时，这会切换图像的不透明度...

$(function() {
    var bools = {};
    $(".filters img").click(function () {
        if (bools[this.id]) {
            opacity = 0.5;
            bools[this.id] = false;
        } else {
            opacity = 1;
            bools[this.id] = true;
        }
        $(this).fadeTo("slow", opacity);
    });
});

它保留一个包含所有图像状态的本地 var，以便知道是显示还是隐藏它们，而不必每次都解析 DOM 状态。

相关文章：