Question

我为卡片元素选择了15种颜色，但我不想为这些颜色类别创建15行脚本。我应该如何更改我的代码？而“ regcard cardlist”类将是其基本样式。

$(document).ready(function(){
  $("#orange").click(function(){
    $("#card_color_choice").removeClass().addClass("regcard cardlist orange");
  });

  $("#green").click(function(){
    $("#card_color_choice").removeClass().addClass("regcard cardlist green");
  });

  $("#blue").click(function(){
    $("#card_color_choice").removeClass().addClass("regcard cardlist blue");
  });

});

.regcard{
  width: 100px;
  height: 100px;
}

.orange{
  background-color: #FF6600;
  color: #EFEFEF;
}

.green{
  background-color: #47AC33;
  color: #EFEFEF;
}

.blue{
  background-color: #637eb6;
  color: #EFEFEF;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Color Choices:<br/>
<a href="#" id="orange">Color1</a><br/>
<a href="#" id="green">Color2</a><br/>
<a href="#" id="blue">Color3</a>

<br/><br/>
<a href="#" target="_blank">
    <div id="card_color_choice" class="regcard cardlist orange" >
        Element inside
    </div>
</a>

Answer 1

您只需在按钮上使用click事件，并借助属性即可解决您的问题。例如

jQuery代码：

$(document).ready(function() {
   $('.color_btn').on('click', function() {
       let color = $(this).attr('color');
       $('#card_color_choice').removeClass().addClass("regcard cardlist "+color+"");
   });
});

html代码：

Color Choices:<br/>
<a href="#" class="color_btn" id="orange" color="orange">Color1</a><br/>
<a href="#" class="color_btn" id="green" color="green">Color2</a><br/>
<a href="#" class="color_btn" id="blue" color="blue">Color3</a>

<br/><br/>
<a href="#" target="_blank">
<div id="card_color_choice" class="regcard cardlist orange" >
Element inside
</div>

希望这些小技巧可以帮助您。

Answer 2

您可以创建一个具有所有类列表名称的变量，并在单击按钮时获取被单击按钮的ID，然后将其附加到变量并将该类添加到div

$(document).ready(function(){
  $("a").click(function(){
  var a="regcard cardlist " + $(this).attr('id')
    $("#card_color_choice").removeClass().addClass(a);
  });

});

.regcard{
  width: 100px;
  height: 100px;
}

.orange{
  background-color: #FF6600;
  color: #EFEFEF;
}

.green{
  background-color: #47AC33;
  color: #EFEFEF;
}

.blue{
  background-color: #637eb6;
  color: #EFEFEF;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Color Choices:<br/>
<a href="#" id="orange">Color1</a><br/>
<a href="#" id="green">Color2</a><br/>
<a href="#" id="blue">Color3</a>

<br/><br/>
<a href="#" target="_blank">
    <div id="card_color_choice" class="regcard cardlist orange" >
        Element inside
    </div>
</a>

Answer 3

请尝试一下

   
   $('a').on('click', function() {
      var color=$(this).attr('color')
    // OR  var color = $(this).attr('id');
      $("#card_color_choice").removeClass().addClass("regcard cardlist "+color);
  });

.regcard{
  width: 100px;
  height: 100px;
}

.orange{
  background-color: #FF6600;
  color: #EFEFEF;
}

.green{
  background-color: #47AC33;
  color: #EFEFEF;
}

.blue{
  background-color: #637eb6;
  color: #EFEFEF;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Color Choices:<br/>
<a href="#" id="orange" color="orange" >Color1</a><br/>
<a href="#" id="green" color="green">Color2</a><br/>
<a href="#" id="blue" color="blue">Color3</a>

<br/><br/>
<a href="#" target="_blank">
    <div id="card_color_choice" class="regcard cardlist orange" >
        Element inside
    </div>
</a>

Answer 4

您需要稍微更改一下jquery代码，其余的html和CSS都很完美。
jQuery代码：

$(document).ready(function(){
   $('.color_btn').on('click', function(){
     var color = $(this).attr('id');
     $('#card_color_choice').removeClass().addClass("regcard cardlist "+color+"");
   });
});

注意：始终尝试将变量存储在数据属性中，而不要使用自制的自定义属性。

希望这会有所帮助！：）

Answer 5

首先，为所有元素选择相同的类名。然后获取事件的ID

  $(document).ready(function() {
        $(".colorBtn").on('click',function() {
            $("#card_color_choice").removeClass();
            $("#card_color_choice").addClass('regcard cardlist ' + $(this).attr('id') );
        })
    });

    .regcard{
        width: 100px;
        height: 100px;
    }

    .orange{
        background-color: #FF6600;
        color: #EFEFEF;
    }

    .green{
        background-color: #47AC33;
        color: #EFEFEF;
    }

    .blue{
        background-color: #637eb6;
        color: #EFEFEF;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Color Choices:<br/>
    <a href="#" class="colorBtn" id="orange">Color1</a><br/>
    <a href="#" class="colorBtn" id="green">Color2</a><br/>
    <a href="#" class="colorBtn" id="blue">Color3</a>

    <br/><br/>
    <a href="#" target="_blank">
        <div id="card_color_choice" class="regcard cardlist orange" >
            Element inside
        </div>
    </a>

单击多个div时jQuery添加/删除类

5 个答案: