多个按钮选择器 Jquery答案

【问题标题】：Multiple Button Selectors Jquery多个按钮选择器 Jquery
【发布时间】：2014-07-01 04:52:11
【问题描述】：

我的网页将包含多个部分，允许用户进行选择并根据他们的选择构建购物篮。

当只有一个部分时，以下代码可以完美运行，但是当有多个部分时，jquery 会影响所有按钮，因为它们当前是相同的类名。

var stg1Butt = $(".stg1_butt");
//Disable Button Function
$(function () {
    stg1Butt.on('click', function (val) {
        //.not Remove elements from the set of matched elements, so removes the button clicked from element
        stg1Butt.not(this).prop("disabled", true);
        var section = stg1Butt.not(this).parents(".section-item");
        section.css({
            "opacity": "0.5"
        });
        var p = $('#calculator p').addClass('calc-content');
        $(p).text($(this).val());
        $('.tck_bx').css({
            "visibility": "visible"
        });
    });
});
//Clear and Enable Button Function
var clr_butt = $(".clr_butt");
clr_butt.on('click', function () {
    if ((stg1Butt).is(':disabled')) stg1Butt.prop("disabled", false).css({
        "opacity": "1"
    });
    var section = stg1Butt.parents(".section-item");
    section.css({
        "opacity": "1"
    });
    $('.tck_bx').css({
        "visibility": "hidden"
    });
    var p = $('#calculator p');
    $(p).empty().removeClass('calc-content');
});

我希望做的是本质上具有一个可以反复使用的通用功能，该功能将检测已单击的按钮，然后禁用该容器 div 中的所有其他按钮。理想情况下，我会使用兄弟姐妹来抓取同一级别的所有按钮，但由于我的 div 结构，我无法做到这一点。

但是，我正在努力解决如何将它们组合在一起。任何建议将不胜感激。

下面是我的 div 结构。

<div id="bnk_stck" class="stg1-section-item">
    <img src="img/stage_one/stck_img1.png">
    <p></p>
    <div class="stg1-section-button">
        <input type="button" name="bnk_butt" value="Button1" class="stg1_butt" />
    </div>
</div>

谢谢

【问题讨论】：

我只看到一个按钮，其他的呢？也不确定你想在这里做什么？ eventListeners 应该适用于具有您用作选择器的类的所有元素。
所以你有多个部分，在其中任何一个（或多个）中单击一个按钮以选择项目，并且在某些时候，用户同时将所有内容添加到购物车？
putvande 每个部分都有大约八个按钮，所以我不想复制太多...是的@alou 是正确的，每个按钮的值都会在他们点击时添加到购物车单个按钮。我要避免的是为每个部分编写相同的函数 x 次。谢谢
我无法理解其中的逻辑，为什么没有一个带有 class="thebutton" 和 data-prodictID="15" 的按钮，然后是一个点击处理函数，将产品 ID 传递给购物车？你说你一次添加一种产品，这是一种方法
@alou 是的，这是有道理的，但是我遇到的问题与添加产品无关，它与能够禁用每个单独部分中的所有其他按钮有关，当该部分的按钮是点击。因此，当单击按钮时，它应该禁用该部分中的所有其他按钮元素，理想情况下，我会使用兄弟姐妹选择它们，但是由于我的结构，我无法使用该方法选择它们。对不起，如果我没有说清楚。

标签： jquery button jquery-selectors

【解决方案1】：

你我认为这个选择器

$(this).closest(".stg1-section-item").find(".stg1_butt").not(this)

选择该部分中的所有内容。我确实有这个选择器在小提琴中工作。我对您的 html 进行了一些改动，以匹配所描述的内容。

http://jsfiddle.net/6KD2k/

【讨论】：

【解决方案2】：

这有点奇怪，但你可以这样做：

$(".stg1_butt").on("click", function(evt){
  var clicked = $(evt.currentTarget);
  $(".stg1_butt").prop('disabled', true);
  clicked.prop('disabled', false);
});

唯一让它变得奇怪的是禁用然后启用目标。如果你在按钮上有唯一的 id，你可以通过它。

【讨论】：