如何比较阵列的按钮选项,然后使用jquery禁用它
我想禁用按钮或更改其类,如果它不是一个有效的选项。如何比较阵列的按钮选项,然后使用jquery禁用它
我正在将此用于电子商务网站上的产品选项。我有3个数组。前两个我用来创建按钮组合。我想我可以使用最后一个数组进行比较,并决定该选项是否有效。 如果无效,我希望该按钮被禁用。
(即:如果选择中型或大型选项,然后绿色被禁用或灰色的,因为它不是一个有效的选项组合)
myArraySize = ['small', 'medium', 'large'];
myArrayColor = ["blue", "red", "green"];
myArrayValidOptions = ["small-blue", "medium-blue", "large-blue", "small-red", "medium-red", "large-red", "small-green"];
这里是关于codepen一个例子。请有人发挥他们的魔力。对此,我真的非常感激。我真的很新的jQuery/JavaScript,并希望得到这个工作。
这是否你想要做什么?
myArraySize = ['small', 'medium', 'large'];
myArrayColor = ["blue", "red", "green"];
myArrayValidOptions = [
"small-blue",
"medium-blue",
"large-blue",
"small-red",
"medium-red",
"large-red",
"small-green"
];
var result = $(".specOptions");
result.html("");
var result2 = $(".specOptions2");
result2.html("");
for (var i = 0; i < myArraySize.length; i++) {
result.append(
'<a class="btn btn-default btn-variant" name="myArraySize" data-value="' +
myArraySize[i] +
'" > ' +
myArraySize[i] +
"</a>"
);
}
for (var i = 0; i < myArrayColor.length; i++) {
result2.append(
'<a class="btn btn-default btn-variant" name="myArrayColor" data-value="' +
myArrayColor[i] +
'" > ' +
myArrayColor[i] +
"</a>"
);
}
$(document).ready(function() {
$(".specOptions a, .specOptions2 a").click(function() {
if ($(this).hasClass("disabled"))
return;
var theSelector = $(this).parent().attr("class");
var value = $(this).data("value"); // value of checkbox
$("." + theSelector + " a").removeClass("btn-primary"); // clear checkboxes in same group (mimic radio behavior)
$("." + theSelector + ' a[data-value="' + value + '"]').addClass("btn-primary"); // check all checkboxes with same value
if (this.name === "myArraySize") {
$("a[name='myArrayColor']").each(function() {
var color = $(this).data("value");
if (myArrayValidOptions.indexOf(value + "-" + color) < 0)
$(this).addClass("disabled").removeClass("btn-primary");
else
$(this).removeClass("disabled");
});
}
});
});
.btn{margin:3px;}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row"></div>
<div class="col-sm-6"></div>
<div class="col-sm-6">
<div class="prodOptions">
<div class="specOptions">
</div>
<div class="specOptions2"></div>
</div>
</div>
</div>
谢谢h77,我很感激你花时间在此。你的例子并没有做我所需要的事情(可能是我解释我需要的可怕工作)。尽管不是非常优雅,我最终找出了它。这是codepen:https://codepen.io/cliebich/pen/rwZKbd –
好的。我认为这是两种方式。我猜想如果你想要的是第二部分的话。 – H77
什么是你的具体问题或问题?请花一些时间阅读[问] – charlietfl
1)您的codepen已损坏。 2)SO不是代码写入服务。预计您会尝试编写一些代码来实现您的目标。然后在这里问一个问题,你在做什么问题。 “你是否想要编码?”对这个网站不是一个有效的问题。 – gforce301
我当时在连接的codepen上玩耍(抓住我之间的变化和代码被打破)。在我陷入困境的状态下,我恢复了原来的工作代码。如果你现在可以采取措施,那会很好。到目前为止,我已经能够谷歌这种事情。这一个让我难住。 –