Или функция Oracle STRAGG (column).
Я должен сказать, что этот вид обработки очень ограничен ... если вы превысите ширину поля или ширину экрана ...
Вы должны действительно использовать $.each()
. Предполагая, что у вас есть следующий HTML, я использовал правильные функции здесь, и вам даже не нужно закрытие в этом случае.
var $colors = $("#VARGRP1 > fieldset > label"); //the colored buttons
var $colorText = $(".colorVariantText"); //the span element to display the color text i.e: Red
$colors.each(function () {
$(this).css("background-color", $(this).data("variantcolor"));
$colors.find("span").css("display", "none");
});
$colors.click( function () {
$colorText.html($(this).attr("data-colorText"));
});
Рабочий фрагмент
var $colors = $("#VARGRP1 > fieldset > label"); //the colored buttons
var $colorText = $(".colorVariantText"); //the span element to display the color text i.e: Red
$colors.each(function () {
$(this).css("background-color", $(this).data("variantcolor"));
$colors.find("span").css("display", "none");
});
$colors.click( function () {
$colorText.html($(this).attr("data-colorText"));
});
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<div id="VARGRP1">
<fieldset>
<label data-variantcolor="red" data-colorText="red">
Click Me!
<span></span>
</label>
<label data-variantcolor="green" data-colorText="green">
Click Me!
<span></span>
</label>
<label data-variantcolor="black" data-colorText="black">
Click Me!
<span></span>
</label>
<label data-variantcolor="blue" data-colorText="blue">
Click Me!
<span></span>
</label>
<label data-variantcolor="orange" data-colorText="orange">
Click Me!
<span></span>
</label>
</fieldset>
</div>
<div class="colorVariantText"></div>