Question

我在列表中有几张图片：

    <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>

我想点击图片然后fadingitout获取图片ID。我还有一个布尔变量，与图像ID相同，如果它是假的，我想设置为true。

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

不幸的是我的点击功能一直在工作。

这是我到目前为止所做的：

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

因为它根本不起作用我猜我做错了元素。

Thanx提前为您提供帮助！

Answer 1

您可以简单地使用this：

，而不是捕获img id

使用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

注意：

!运算符的效果如何。

!true is false !false is true

如果您在click标记上绑定li事件，我稍后会这样做。您可以使用以下方式捕获ID：

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

或

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

您只想淡化切换图片？您可以使用fadeToggle

$(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; }

希望这可以回答你的一些问题。

Answer 2

你的选择器错了，应该是

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

Answer 3

你的选择器应该是：

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

Answer 4

尝试：

$(".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;
});

Answer 5

在您的jquery代码中，您提供了 img.filter ，这意味着 img 标记，类名为过滤器，但在您的HTML中类名称过滤器没有img标记，因此请更改您的代码，如下所示

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

希望这能解决您的问题

Answer 6

这会切换图像的不透明度并根据请求设置布尔值...

http://jsfiddle.net/johncmolyneux/kYz8k/3/

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

6 个答案: