Получение значения OptionID при нажатии?

#javascript #jquery

Вопрос:

Как мне получить значение OptionID при нажатии на ссылку Добавить ( .plus-link )?

Каждый li может содержать select (выпадающий список) или без него.

     <ul>

  <li>
    <div class="menux">
        <div class="text-block">
            <div class="text-holder">
                <h3>  Item Name </h3>
                <p> Description </p>
            </div>
        </div>
        <div optionid="46812" class="price"> <strong>£4.90</strong> </div>
        <div class="add-item">  <a class="plus-link" href="#">plus</a>  </div>
    </div>
</li>

<li>
    <div class="menux">
        <div class="text-block">
            <div class="text-holder">
                <h3> Item Name 2 </h3>                                                                                                      </h3>
                <p> Description  </p>
            </div>
        </div>
    </div>
    <form class="menu-form" action="#">
        <fieldset>
            <a class="plus-link" href="#">plus</a>
            <select id="optionid" class="select">
                <option value="1">9", £3.99</option>
                <option value="2">12", £5.49</option>
            </select>
        </fieldset>
    </form>
</li>

</ul>

Jquery

 $(document).ready(function() {
    $("li .plus-link").click(function(event) {
        event.preventDefault();
        alert( $(this).attr("OptionID") );
    });
});

Ответ №1:

Вы хотите захватить .siblings(‘.OptionID’). Затем, предполагая, что вам просто нужно значение этого поля со списком, вы должны использовать .val() для получения выбранного значения:

http://jsfiddle.net/MacAnthony/zzrrp/

Редактировать

В ответ на редактирование попробуйте это. Он будет искать как select, так и div с атрибутом и должен иметь возможность перемещаться по деревьям, где он не является прямым аналогом.

http://jsfiddle.net/MacAnthony/zzrrp/4/

1. Ты переключил селектор на меня. Я не заметил, что вы изменили его с class на id. Мне потребовалось немного времени, чтобы осознать. Редактирование должно сработать.

2. Спасибо за редактирование. Теперь это работает 🙂 Код кажется немного длинным.. Должен быть простой способ? Как бы вы разместили класс или идентификатор в select и без select? Просто сделать JS-код короче? Спасибо

3. Вам нужно либо «if», либо троичное значение (как я сделал), поскольку значение будет получено двумя различными способами. Это можно было бы сократить, объединив часть кода, но на самом деле 6 строк не кажутся такими уж плохими. Лучшим способом сократить этот код было бы создать другую функцию, которая выполняла бы троичную за вас, и просто вызвать эту функцию. Я не знаю, без какой части этого кода вы могли бы обойтись. jsfiddle.net/MacAnthony/zzrrp/5

Ответ №2:

Вы можете попробовать это

Отредактируйте там немного неправильно понятый вопрос и обновите для новой разметки

 $(document).ready(function() {
$("li .plus-link").click(function(event) {
    event.preventDefault();
    var prev = $(this).closest('li').find('#optionid, .price');
    var OptionId = prev.val() || prev.attr('optionid');
    console.log(OptionId);
});
});

Пример в http://jsfiddle.net/nickywaites/pTPr8/1 /

Ответ №3:

Вы пытаетесь получить атрибут OptionID, используя $(this) который ссылается на привязку.Вы должны использовать prev() для обхода дерева и получения значения selectbox.

 $(document).ready(function() {
    $("li .plus-link").click(function(event) {
        event.preventDefault();
        alert( $(this).prev(".OptionID").val() );
    });
});

В данном случае. Вы должны использовать

 $(document).ready(function() {
    $("li .plus-link").click(function(event) {
        event.preventDefault();
        alert( $(this).siblings('.OptionID').val() );
    });
});

1. Я считаю, что это должно быть .OptionID

2. Я не думаю, что это возвращает значение div, если это то, что требуется.

3. @user622378 можете ли вы уточнить, чего именно вы хотите. Потому что есть два якоря.