Jquery для того же идентификатора, что и имя класса выбранного элемента? - PullRequest
Новая
       18

Jquery для того же идентификатора, что и имя класса выбранного элемента?

1 голос
/ 29 ноября 2009

Я пытаюсь использовать 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');  
    });
});

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

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

Ответы [ 6 ]

3 голосов
/ 29 ноября 2009

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

$(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 только этой формой.

1 голос
/ 30 ноября 2009

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

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

    });
});
1 голос
/ 29 ноября 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');              
    }
});
1 голос
/ 29 ноября 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');  
    });
});
0 голосов
/ 29 ноября 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');  
      }
   });
});
0 голосов
/ 29 ноября 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

...