Jquery将相同的id作为被点击元素的类名？

Question

我正在尝试使用jquery仅在选择单选按钮后启用表单按钮。 这是一个T恤商店，用户需要在“添加到购物车”按钮启用之前选择尺寸。 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');  
    });
});

然而，这会启用页面上的所有提交按钮（页面上有很多T恤）。单选按钮的第二个类名称与提交按钮的id相同，那么有没有办法使用此类名来定位特定提交按钮的启用？

（希望一切都有道理！）

Answer 1

准确回答你的问题：

$(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仅搜索该表单。

Answer 2

使用包含div或p或table单元格等的包装器。下面的示例使用div，类为<！> quot; wrapper _ <！> lt;％= productid％<！> gt; <！> quot;在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');  
    });
});

Answer 3

我不确定我是否得到了你想要的东西，因此我不确定这是做你想要做的事情的最佳方式......可能会有一些更优雅的尝试，但这里是一种定位的方法第二类'productXY'的ID：

$('.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');              
    }
});

Answer 4

根据您提供的元素层次结构，最简单的方法是检查带有类buy_button的元素的兄弟姐妹并更改它：

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

    });
});

Answer 5

如果您真的喜欢使用第二个类名来指定您想要使用的提交按钮的ID，那么您可以这样做（我不赞同它，但如果是这样的话你想做...哈哈），但是看着课程你需要高兴。

这当然是完全未经测试，大声笑......但是尝试这样的东西（这假设'产品'将始终是提交按钮的id的开头）：

$(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');  
      }
   });
});

Answer 6

使用你展示的html，我想到了下一个方法。
例如：

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

如果标记包装在容器（div或其他）中，您可以从容器中获取id / class以查找容器中的提交按钮：

$(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