Question

我有一个网页，它将有多个部分，允许用户根据他们的选择进行选择和建立购物篮。

当只有一个部分时，以下代码可以正常工作，但是当有多个部分时，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>

由于

Answer 1

我考虑这个选择器

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

选择该部分中的所有内容。我确实让这个选择器在小提琴中工作。我对你的html采取了一些自由来匹配所描述的内容。

http://jsfiddle.net/6KD2k/

Answer 2

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

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

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

多个按钮选择器Jquery

2 个答案: