Динамические селекторы с Jquery с PHP цикла - PullRequest
Новая
       20

Динамические селекторы с Jquery с PHP цикла

3 голосов
/ 07 июня 2010

У меня есть цикл while, который создает список якорных тегов, каждый из которых имеет уникальное имя класса в количестве от 1 до любого количества элементов. Я хотел бы изменить атрибут css для конкретного тега привязки и класса при нажатии на него, поэтому допустим, что цвет фона изменился. Вот мой код 

while($row = mysql_fetch_array($results)){
 $title = $row['title'];
 $i++;
 echo "<a class='$i'>$title</a>

}

Я бы хотел, чтобы моя jquery выглядела примерно так, очевидно, она будет более сложной, чем эта, я просто запутался в том, с чего начать. 

$(document).ready(function() {
$('a .1 .2 .3 .4 and so on').click(function() {
$('a ./*whichever class was clicked*/').css('background':'red');
        });
   });

Ответы [ 4 ]

2 голосов
/ 07 июня 2010

Можете ли вы дать классу более последовательное имя? Как myClass_1, myClass_2 и т. Д.

Тогда вы можете сделать: 

$(document).ready(function() {
    $('a[class^=myClass_]').click(function() { // Assign handler to elements with a
                                               //  class that starts with 'myClass_'
        $(this).css('background','red');  // Change background of clicked one.

    });
});

Здесь селектор «начинается с» используется для назначения события всем классам, которые начинаются с myClass.

При необходимости вы все равно можете получить номер индекса.

В обработчике событий $(this) относится к тому, который был нажат.

Live Пример: http://jsfiddle.net/Jurv3/

Документы для селектора «начинается с»: http://api.jquery.com/attribute-starts-with-selector/

РЕДАКТИРОВАТЬ: У меня пропал ] в селекторе. Исправлено.

2 голосов
/ 07 июня 2010

Вы можете использовать итератор для массива следующим образом: 

var myclasses = [".1",".2",".3"]; // generated by php

$.each(myclasses, function(index, value) { 
    $('a '+value).click(function() {
        $(this).css('background':'red');
    });
});

Примечание: Я думаю, вам лучше использовать уникальный идентификатор для каждого элемента в списке тегов привязки, и пусть все они разделяют один класс. Это больше, для чего нужны классы и идентификаторы.

1 голос
/ 07 июня 2010

Просто дайте им все одинаковый класс, скажем, myClass. Тогда: 

$('a.myClass').click(function () {
    $(this).css('background':'red');
});

Это будет работать до тех пор, пока вы работаете со ссылками на себя или своих родителей - если отношения между ссылкой и целью одинаковы для каждого из них. Для работы с родительским элементом это будет $(this).parent().css(...), а для следующего элемента - $(this).next().css(...) и т. Д.

0 голосов
/ 07 июня 2010

вы пробовали что-то подобное? 

while($row = mysql_fetch_array($results)){
 $title = $row['title'];
 $i++;
 echo '<a class="anchor_link" id="'.$i.'">'.$title.'</a>';

}

А затем для jQuery: 

$(document).ready(function() {
    $('a.anchor_link').click(function() {
        var thisAnchor = $(this).attr('id');
        $(this).css('background':'red');
    });
});

Причина, по которой я добавил js var 'thisAnchor', заключается в том, что я предполагаю, что вам нужна переменная $ i php в качестве маркера привязки? если это так, вы можете просто взять js var и использовать его так, как вам нужно. если вы не можете использовать идентификатор, потому что привязанный контент помечен идентификатором, используйте другой атрибут, например, «title» или «alt».

Надеюсь, это было полезно.

...