JQuery: не работает

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>

Это вывод 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() терпит неудачу, потому что вы используете числа в качестве идентификаторов, что недопустимо в HTML4.Все атрибуты id должны начинаться с буквенного символа.Вы можете добавить к своим идентификаторам префикс r, например:

<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] для получения элемента DOM из выбора jQuery
• .not(record) для удаления элемента record из набора
• .find(), чтобы найти все дочерние элементы, соответствующие определенному селектору

Answer 2

Я не думаю, что проблема :not.

Вы видите, что в ваших первых div оба изображения имеют class="1".это может быть проблемой.Попробуйте установить class="0" для одного из них.

Answer 3

Стоит попробовать метод .not () .Это делает ваш селектор более чистым и может также принимать функцию в качестве аргумента, которая предоставляет больше возможностей.

Кроме того, как я уже упоминал, HTML4-идентификаторы a> должны начинаться с буквы AZ или az
b>Может сопровождаться: буквами (A-Za-z), цифрами (0-9), дефисами ("-"), символами подчеркивания ("_"), двоеточиями (":") и точками (".")