Question

我有一个click事件来显示所选颜色的文本，但是循环遍历颜色数组，我得到其中的所有项目，而不仅仅是获得相应的项目。到目前为止，我可以获取彩色文本，但是可以重复五次。

例如，单击黑色正方形，显示黑色，黑色，黑色，黑色，黑色。我只需要显示一次。

这是HTML：

<fieldset class="radio col-xs-12 noPadding">
<label data-variantcolor="#000000" data-colorText="Black" class="radio" 
for="VARGRP1_0" style="background-color: rgb(0, 0, 0);"><input type="radio" 
value="VO26" name="VARGRP1" id="VARGRP1_0">                        <span 
style="display: none;">Black</span>
</label>
<label data-variantcolor="#008000   " data-colorText="Green" class="radio 
active" for="VARGRP1_1" style="background-color: rgb(0, 128, 0);"><input 
type="radio" value="VO27" name="VARGRP1" id="VARGRP1_1">                        
<span style="display: none;">Green</span>
</label>
<label data-variantcolor="#D60A0A" data-colorText="Red" class="radio" 
for="VARGRP1_2" style="background-color: rgb(214, 10, 10);"><input 
type="radio" value="VO4" name="VARGRP1" id="VARGRP1_2">                        
<span style="display: none;">Red</span>
</label>
<label data-variantcolor="#FFFF00   " data-colorText="Yellow" class="radio" 
for="VARGRP1_3" style="background-color: rgb(255, 255, 0);"><input 
type="radio" value="VO31" name="VARGRP1" id="VARGRP1_3">                        
<span style="display: none;">Yellow</span>
</label>
<label data-variantcolor="#FFFFFF" data-colorText="White" class="radio" 
for="VARGRP1_4" style="background-color: rgb(255, 255, 255);"><input 
type="radio" value="VO30" name="VARGRP1" id="VARGRP1_4">                        
<span style="display: none;">White</span>
</label>
</fieldset>

 var $colors = $("#VARGRP1 > fieldset > label"); //the colored buttons
 var $colorText = $(".colorVariantText"); //the span element to display the color text i.e: Red           

        for(var i = 0; i < $colors.length; i++)
        {
            $colors.eq(i).css("background-color", $colors.eq(i).attr("data-variantcolor"));
            $colors.find("span").css("display", "none");

            (function (i) {
                $colors.click( function () {
                        $colorText.html($(this).eq(i).attr("data-colorText")); 
                });
            })(i);

        }

Answer 1

您应该真正使用$.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>

循环项目不只一次检索结果

1 个答案: