我猜有一个简单的问题。我喜欢HTML形式的表格，其中可以选择多个选择器。在这些选择器中，我具有可以选择的数据属性（只有一个）。如果单击，则必须将数据属性存储到隐藏字段中。
我的HTML：
function styleChoice() {
var productHandler = $('.styleChoiceButton');
var setDataVal = $('#plantChoiceSelection');
productHandler.bind('click', function (e) {
var productDataStyle = productHandler.data('style');
console.log('clicked');
console.log(productDataStyle);
console.log(e);
productHandler.removeClass("is-selected");
setDataVal.attr(productDataStyle);
$(this).addClass("is-selected");
});
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="column">
<button class="styleChoiceButton" type="button" data-style="style-one">
<figure>
<strong>Stijl 1</strong>
<img src="https://via.placeholder.com/600x400" width="600" height="400" alt="productafbeeldingen" />
</figure>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ligula nulla, consequat laoreet vulputate ac, dictum ac dui. Nunc placerat tincidunt sollicitudin. Integer at libero leo. Praesent enim dolor, rhoncus consequat sapien vitae, maximus bibendum nunc. In consectetur leo vehicula porta vehicula. </p>
</article>
</button>
</div>
<div class="column">
<button class="styleChoiceButton" type="button" data-style="style-two">
<figure>
<strong>Stijl 2</strong>
<img src="https://via.placeholder.com/600x400" width="600" height="400" alt="productafbeeldingen" />
</figure>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ligula nulla, consequat laoreet vulputate ac, dictum ac dui. Nunc placerat tincidunt sollicitudin. Integer at libero leo. Praesent enim dolor, rhoncus consequat sapien vitae, maximus bibendum nunc. In consectetur leo vehicula porta vehicula. </p>
</article>
</button>
</div>
<div class="column">
<button class="styleChoiceButton" type="button" data-style="style-three">
<figure>
<strong>Stijl 3</strong>
<img src="https://via.placeholder.com/600x400" width="600" height="400" alt="productafbeeldingen" />
</figure>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ligula nulla, consequat laoreet vulputate ac, dictum ac dui. Nunc placerat tincidunt sollicitudin. Integer at libero leo. Praesent enim dolor, rhoncus consequat sapien vitae, maximus bibendum nunc. In consectetur leo vehicula porta vehicula. </p>
</article>
</button>
</div>
<div class="column">
<button class="styleChoiceButton" type="button" data-style="style-four">
<figure>
<strong>Stijl 4</strong>
<img src="https://via.placeholder.com/600x400" width="600" height="400" alt="productafbeeldingen" />
</figure>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ligula nulla, consequat laoreet vulputate ac, dictum ac dui. Nunc placerat tincidunt sollicitudin. Integer at libero leo. Praesent enim dolor, rhoncus consequat sapien vitae, maximus bibendum nunc. In consectetur leo vehicula porta vehicula. </p>
</article>
</button>
</div>
正如您提到的那样，我单击了哪些选项，我唯一的数据ID就是样式1。
感谢您的帮助，谢谢！
答案 0 :(得分：1)
您可以尝试以下操作：
function styleChoice() {
var productHandler = $('.styleChoiceButton');
var setDataVal = $('#plantChoiceSelection');
productHandler.bind('click', function (e) {
var elem = $(this);
var productDataStyle = elem.data('style');
console.log('clicked');
console.log(productDataStyle);
productHandler.removeClass("is-selected");
setDataVal.attr('data-selected', productDataStyle);
elem.addClass("is-selected");
});
}
答案 1 :(得分：0)
您应该为每个 .styleChoiceButton
styleChoice();
function styleChoice() {
var productHandler = $('.styleChoiceButton');
var setDataVal = $('#plantChoiceSelection');
productHandler.each(function() {
$(this).bind('click', function (e) {
var productDataStyle = $(this).data('style');
console.log('clicked');
console.log(productDataStyle);
// console.log(e);
productHandler.removeClass("is-selected");
setDataVal.attr(productDataStyle);
$(this).addClass("is-selected");
});
});
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="column">
<button class="styleChoiceButton" type="button" data-style="style-one">
<figure>
<strong>Stijl 1</strong>
<img src="https://via.placeholder.com/600x400" width="600" height="400" alt="productafbeeldingen" />
</figure>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ligula nulla, consequat laoreet vulputate ac, dictum ac dui. Nunc placerat tincidunt sollicitudin. Integer at libero leo. Praesent enim dolor, rhoncus consequat sapien vitae, maximus bibendum nunc. In consectetur leo vehicula porta vehicula. </p>
</article>
</button>
</div>
<div class="column">
<button class="styleChoiceButton" type="button" data-style="style-two">
<figure>
<strong>Stijl 2</strong>
<img src="https://via.placeholder.com/600x400" width="600" height="400" alt="productafbeeldingen" />
</figure>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ligula nulla, consequat laoreet vulputate ac, dictum ac dui. Nunc placerat tincidunt sollicitudin. Integer at libero leo. Praesent enim dolor, rhoncus consequat sapien vitae, maximus bibendum nunc. In consectetur leo vehicula porta vehicula. </p>
</article>
</button>
</div>
<div class="column">
<button class="styleChoiceButton" type="button" data-style="style-three">
<figure>
<strong>Stijl 3</strong>
<img src="https://via.placeholder.com/600x400" width="600" height="400" alt="productafbeeldingen" />
</figure>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ligula nulla, consequat laoreet vulputate ac, dictum ac dui. Nunc placerat tincidunt sollicitudin. Integer at libero leo. Praesent enim dolor, rhoncus consequat sapien vitae, maximus bibendum nunc. In consectetur leo vehicula porta vehicula. </p>
</article>
</button>
</div>
<div class="column">
<button class="styleChoiceButton" type="button" data-style="style-four">
<figure>
<strong>Stijl 4</strong>
<img src="https://via.placeholder.com/600x400" width="600" height="400" alt="productafbeeldingen" />
</figure>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ligula nulla, consequat laoreet vulputate ac, dictum ac dui. Nunc placerat tincidunt sollicitudin. Integer at libero leo. Praesent enim dolor, rhoncus consequat sapien vitae, maximus bibendum nunc. In consectetur leo vehicula porta vehicula. </p>
</article>
</button>
</div>
答案 2 :(得分：0)
好吧，您应该能够在简单的JQuery中完成所有这些操作：
$('.StyleChoiceButton').on('click', function(e) {
if ($(this)[0].hasAttribute('data-style')) {
myhiddenfield = this.attributes['data-style'].value;
}
});