jQuery - обработка щелчка

Question

У меня есть такая конструкция:

             <div id="slider"> 
               <div id="nav">
                    <div class="sliderPart">
                        <a href="#computers">
                            <strong>1</strong>
                        </a>
                    </div>
                    <div class="sliderPart">
                        <a href="#network">
                            <strong>2</strong>
                        </a>
                    </div>
                    <div class="sliderPart">
                        <a href="#web">
                            <strong>3</strong>
                        </a>
                    </div>
                    <div class="sliderPart">
                        <a href="#support">
                            <strong>4</strong>
                        </a>
                    </div>
               </div>
               <div id="slider-content">
                    <a href="#computers" id="slider-computers" class="slider-block">Test1</a>
                    <a href="#network" id="slider-network" class="slider-block">Test 2</a>
                    <a href="#web" id="slider-web" class="slider-block">Test 3</a>
                    <a href="#support" id="slider-support" class="slider-block">Test 4</a>
               </div>
            </div>

Теперь я должен справиться с нажатием на 'навигатор" и "слайдер-содержимое' и получаем щелкнутый элемент href-attribute.

       $('#slider').click(function(){
            console.log( $(this) );
       });

Используя этот код, я получаю

[div#слайдер]

Answer 1

Использование attr чтобы получить или задать значения атрибутов элемента:

$('#slider a').click(function(){
    console.log( $(this).attr('href') );
});

Селектор #slider ссылается на элемент div, именно поэтому firebug выводит [div#slider].Вы можете настроить таргетинг на якоря внутри него, используя предок потомок селектор:

Соответствует всем элементам-потомкам указанным с помощью "descendant" элементов указанным с помощью "ancestor".

Это означает поместить элемент-потомок после предка, разделенный пробелом, как в приведенном выше примере - $('#slider a')

---

К ВАШЕМУ СВЕДЕНИЮ, ПО СОСТОЯНИЮ НА ВЕРСИЮ 1.6 .введена функция prop(). _{Подробная информация}

Различие между атрибутами и свойствами может быть важным в конкретных ситуациях.До jQuery 1.6 метод .attr() иногда учитывал значения свойств при извлечении некоторых атрибутов, что могло вызвать непоследовательное поведение.Начиная с версии jQuery 1.6, метод .prop() предоставляет способ явного извлечения значений свойств, в то время как .attr() извлекает атрибуты. _{Подробная информация}

Например, SelectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked и defaultSelected должны быть извлечены и установлены с помощью метода .prop().До jQuery 1.6 эти свойства можно было получить с помощью метода .attr(), но это не входило в сферу действия attr.Они не имеют соответствующих атрибутов и являются всего лишь свойствами. _{Подробная информация}