Question

这是我的HTML

<div class="records" id="1">
        <div class="controls">
            <a class="special">
                <img class="1" src="special1.png" class="shown" />
                <img class="1" src="special0.png" class="hidden" />
            </a>
        </div>
</div>

<div class="records" id="2">
        <div class="controls">
            <a class="special">
                <img class="1" src="special1.png" class="hidden" />
                <img class="0" src="special0.png" class="shown"/>
            </a>
        </div>
</div>

它是从db检索到的内容的HTML输出。但有一段时间，只有一个图片在special1.png或special0.png的一条记录中显示，但当用户点击任意a.special时，我想要该记录的special1.png要显示，其他a.special中的所有图片都必须只显示special0.png。为此我尝试使用此

来做到这一点

$(".controls a").click(function() {
    var action = $(this).attr('class');
    var id = $(this).parent(".controls").parent(".records").attr('id');

    //Now send post request and database things
    //function(data) { //After this stage
       $(this).children("img.1").show(); //show the active image
       $(this).children("img.0").hide(); //hide the inactive image

    //However this below I used :not to skip current element but it doesn't, it hides all inactive image and shows all active images

       $("div:not(#"+id+") a.special img.1").hide(); //hide all the active image except this one 
       $("div:not(#"+id+") a.special img.0").show(); //show all the in-active image except this one 

    // } //
});

Answer 1

首先，我认为:not()失败是因为您使用数字作为ID，这在HTML4中是不允许的。所有id属性必须以字母字符开头。您可以使用r为您的ID添加前缀，例如：

<div class="records" id="r1">

其次，使用.not方法可以更有效地完成这项工作：

$(".controls a").click(function() {
    var action = this.class;
    var record = $(this).closest(".records")[0]; // get the DOM element of the ancestor .records

    //Now send post request and database things
    //function(data) { //After this stage
       $(this).children("img.r1").show(); //show the active image
       $(this).children("img.r0").hide(); //hide the inactive image

       $("div").not(record).find("a.special img.r1").hide(); //hide all the active image except this one 
       $("div").not(record).find("a.special img.0").show(); //show all the in-active image except this one 

    // } //
});

请注意

的使用

this.class替换$(this).attr('class')
.closest('.records')找到与班级records
[0]从jQuery选择中获取DOM元素
.not(record)从集合

record

.find()查找与特定选择器匹配的所有后代元素

Answer 2

值得尝试.not()方法。它使您的选择器更清晰，并且还可以将函数作为参数来提供更多功能。

另外，正如我已经提到的 - HTML4 Id 一个＆GT;必须以字母A-Z或a-z开头 B个可以跟着：字母（A-Za-z），数字（0-9），连字符（“ - ”），下划线（“_”），冒号（“：”）和句点（“。”）< / p>

Answer 3

我认为它不是:not的问题。

您可以在第一张div中看到两张图片都有class="1"。这可能是问题所在。尝试将class="0"设置为其中的一张图片。

jquery：不是不行

3 个答案: