Jquery以与单击元素的类名相同的ID为目标？答案

【问题标题】：Jquery to target same id as class name of clicked element?Jquery以与单击元素的类名相同的ID为目标？
【发布时间】：2010-12-21 07:58:37
【问题描述】：

我只在选择单选按钮后才尝试使用 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相同，那么有没有办法使用这个类名来定位特定提交按钮的启用？

（希望一切都有意义！）

【问题讨论】：

每个单选 + 提交按钮是否有一个共享的父元素？意思是<div class="product21"> 或（第二个问题）是单选 + 提交按钮分组在某种父项中，与其他单选和提交组分开？
单选按钮和提交按钮位于不同的 DIV 中，但都包含在一个表单中（每个产品都有自己的表单）。我可以想象将两个 div 包含在另一个 div 中，并给它一个 id 'productXXX'。
不，不需要额外的 div。我根据您的信息更新了我的答案，每个信息都包含在一个表单中。

标签： jquery forms button attributes

【解决方案1】：

根据您提供的元素层次结构，最简单的方法是检查兄弟元素中具有类 buy_button 的元素并进行更改：

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

    });
});

【讨论】：

【解决方案2】：

使用您展示的 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

【讨论】：

不确定，但您的 .class() 不是 jQuery 函数。如果您刚刚删除了.class()，该函数将起作用，因为$( selector, scope ) 最适用于现有的jQuery 集或范围的DOM 对象。
您的权利。我应该写 var containerClass = $(this).parent().attr("class");我同意你的第二个陈述，只要你知道范围。这就是上述声明试图抓住的东西。问题示例为 ANY .radioclick 设置了点击功能，因此范围可能不同。这就是为什么我试图获取父容器的类名。

【解决方案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');              
    }
});

【讨论】：

我比我的回答更喜欢这个，但我会合并最后几行：$('#'+id).removeAttr('disabled').attr('value','add到购物车');此外，我会在获得 var id 之前对 var 类添加一个检查，以确保它不为 null 或为空。

【解决方案4】：

如果您真的喜欢使用第二个类名称来指定要使用的提交按钮的 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');  
      }
   });
});

【讨论】：

lpfavreau 的想法是一样的，但更好。我会选择那个...哈哈。

【解决方案5】：

使用带有 div 或 p 或表格单元格等的包装器。下面的示例在 ASPX 中使用带有类“wrapper_”的 div。

呈现的 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');  
    });
});

【讨论】：

【解决方案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 的搜索范围仅限于该表单。

【讨论】：