Jquery для таргетинга на тот же идентификатор, что и имя класса элемента, по которому щелкнули мышью?

Я пытаюсь использовать jquery для включения кнопки формы только после выбора переключателя. Это магазин футболок, где пользователь должен выбрать размер, прежде чем кнопка «Добавить в корзину» станет активной. HTML-код выглядит примерно так:

<input class="radioclick product21" type="radio" name="variation[variation_select_21_1]" value="1">Big
<input class="radioclick product21" type="radio" name="variation[variation_select_21_2]" value="2">Small

<input type="submit" id="product21" class="buy_button" name="Buy" disabled="disabled" value=" ">

Итак, кнопка отправки отключена. Чтобы включить его, когда пользователь нажимает переключатель, я использую этот jquery:

$(function()
{
     $('.radioclick').click(function()
    {
        $('.buy_button').removeAttr('disabled');
        $('.buy_button').attr('value', 'add to cart');  
    });
});

Однако это включает ВСЕ кнопки отправки на странице (на странице много футболок). Имя второго класса переключателя совпадает с идентификатором кнопки отправки, поэтому есть ли способ использовать это имя класса для включения конкретной кнопки отправки?

(надеюсь, что все имеет смысл!)


person cannyboy    schedule 29.11.2009    source источник
comment
Есть ли общий родительский элемент для каждой из кнопок радио + отправки? Значение <div class="product21"> или (второй вопрос) сгруппированы ли кнопки радио + отправки в какой-то родительский элемент, который отделен от других групп радио и отправки?   -  person Doug Neiner    schedule 29.11.2009
comment
Радиокнопки и кнопки отправки находятся в отдельных DIV, но оба заключены в форму (каждый продукт имеет свою собственную форму). Я мог бы заключить два блока в другой блок и присвоить ему идентификатор productXXX.   -  person cannyboy    schedule 29.11.2009
comment
Нет, дополнительный div не нужен. Я обновил свой ответ на основе вашей информации о каждом из них, содержащемся в форме.   -  person Doug Neiner    schedule 29.11.2009


Ответы (6)


Чтобы точно ответить на ваш вопрос:

$(function() {
    $('.radioclick').click(function(){
        var id = this.className.split(' ')[1]; // second class
        $('#' + id).removeAttr('disabled').attr('value', 'add to cart');  
    });
});

Но есть менее инвазивные способы сделать это, но это зависит от вашей разметки.

РЕДАКТИРОВАТЬ: Поскольку вы сказали, что каждый из них находится в своей форме, просто используйте этот код:

$(function() {
    $('.radioclick').click(function(){
        $(this).closest('form')
               .find('.buy_button')
               .removeAttr('disabled')
               .attr('value', 'add to cart');  
    });
});   

Это берет выбранный переключатель, находит родительскую форму, а затем ограничивает поиск .buy_button только этой формой.

person Doug Neiner    schedule 29.11.2009

Используйте оболочку с div или p или ячейку таблицы и т. Д. В моем примере ниже используется div с классом «wrapper _‹% = productid%> »в ASPX.

Визуализированный HTML:

<div id="wrapper_product21">
<input class="radioclick product21" type="radio" name="variation[variation_select_21_1]" value="1">Big
<input class="radioclick product21" type="radio" name="variation[variation_select_21_2]" value="2">Small

<input type="submit" id="product21" class="buy_button" name="Buy" disabled="disabled" value=" ">
</div>

Визуализированный Javascript:

$(function()
{
     $('.radioclick').click(function()
    {
        var productButton = $('#' + "wrapper_" + $(this).id + ' .buy_button');
        productButton.removeAttr('disabled');
        productButton.attr('value', 'add to cart');  
    });
});
person o.k.w    schedule 29.11.2009

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

$('.radioclick').click(function() {
    var id = null;
    var classes = $(this).attr('class');
    if (id = classes.match(/product[0-9]*/)) {
        $('#' + id).removeAttr('disabled').attr('value', 'add to cart');              
    }
});
person lpfavreau    schedule 29.11.2009
comment
Мне это нравится больше, чем мой ответ, но я бы объединил последние несколько строк: $ ('#' + id) .removeAttr ('disabled'). Attr ('value', 'add to cart'); Также я бы добавил проверку классов var, прежде чем я получу идентификатор var, чтобы убедиться, что он не пустой или пустой. - person Ben Lesh; 29.11.2009

На основе предоставленной вами иерархии элементов проще всего проверить братьев и сестер для элемента с классом buy_button и изменить его:

$(function()
{
     $('.radioclick').click(function()
    {
        $(this).siblings('.buy_button')
               .removeAttr('disabled')
               .attr('value', 'add to cart');

    });
});
person prime_number    schedule 30.11.2009

Если вам действительно нравится идея использовать это второе имя класса для указания идентификатора кнопки отправки, которую вы хотите использовать, вы можете это сделать (я не поддерживаю это, но если это то, что вы хотите да ... ха-ха), но вам нужно набраться ума, глядя на классы.

Это, конечно, полностью не проверено, лол ... но попробуйте что-нибудь вроде этого (предполагается, что 'product' всегда будет началом идентификатора кнопки отправки):

$(document).ready(function() {
   $('.radioclick').click(function() {
      var classAttr = $(this).attr('class');
      var classes = classAttr.split(' ');
      var submitId;
      for(var i = 0; i < classes.length; i++) {
         var c = classes[i];
         if(c.indexOf('product') == 0) {
            submitId = c; 
         }
      }
      if(submitId) {
         $('#' + submitId).).removeAttr('disabled').attr('value', 'add to cart');  
      }
   });
});
person Ben Lesh    schedule 29.11.2009
comment
Идея lpfavreau такая же, но лучше. Я бы пошел с этим ... ха-ха. - person Ben Lesh; 29.11.2009

с показанным вами html приходит на ум следующий метод.
пример:

$(function()
{
     $('.radioclick').click(function()
    {
        $(this).next('.buy_button').removeAttr('disabled');
        $(this).next('.buy_button').attr('value', 'add to cart');  
    });
});

Если разметка обернута в контейнер (div или иначе), вы можете получить идентификатор / класс из контейнера, чтобы найти кнопку отправки в контейнере:

$(function()
{
     $('.radioclick').click(function()
    {
        var containerClass = $(this).parent().attr("class");
        $('.buy_button', containerClass).removeAttr('disabled');
        $('.buy_button', containerClass).attr('value', 'add to cart');  
    });
});

взгляните на селекторы. С ними можно проявить изобретательность. http://docs.jquery.com/Selectors

person Bless Yahu    schedule 29.11.2009
comment
Не уверен, но ваша .class() не является функцией jQuery. Функция будет работать, если вы просто удалите .class(), поскольку $( selector, scope ) лучше всего работает с существующим набором jQuery или объектом DOM для области. - person Doug Neiner; 29.11.2009
comment
Твое право. Я должен был написать var containerClass = $ (this) .parent (). Attr (class); И я согласен с вашим вторым утверждением, если вы знаете масштабы. Это то, что пытались уловить приведенное выше утверждение. Пример вопроса устанавливает функцию щелчка для ЛЮБОГО .radioclick, поэтому область действия может быть другой. Вот почему я пытаюсь получить имя класса родительского контейнера. - person Bless Yahu; 30.11.2009