toggleClass based on Click Function

toggleClass based on Click Function

本文关键字：Function Click on based toggleClass      更新时间：2023-09-26

我有兴趣根据点击的内容更改togglecclass。

我希望类依赖于页面上的前一次点击。

如果我点击字母"A"——在这种情况下，它会把正方形变成红色。点击方形后，我想把。toggleclass的名称改为。darkred

当我点击字母"B"时-我希望。toggleclass为。darkblue

我如何使它动态，以便它知道要添加哪个类到toggleClass

<script>
$("li.alpha").click(function(){
    $(".color").addClass("red").removeClass("blue").removeClass("orange");
});
$("li.bravo").click(function(){
    $(".color").addClass("blue").removeClass("red").removeClass("orange");
});
$("li.charlie").click(function(){
    $(".color").addClass("orange").removeClass("blue").removeClass("red");
});
</script>
<script>
    $(".color").on("mousedown mouseup", function(e)
{
    $(".color").toggleClass("darkblue");  // I want this class to be dynamic. It should be based on what I clicked on. so in this case I would have clicked on li.bravo
});
</script>

我希望在. toggleclass中添加的类是动态的，并且基于我正在添加的类。

red = .darkred

blue = .darkblue

orange = .darkorange.

https://jsfiddle.net/hp6e0w3z/

试试这个

<script>
    $("li.alpha").click(function(){
        $(".color").addClass("red").removeClass("blue").removeClass("orange");
    });
    $("li.bravo").click(function(){
        $(".color").addClass("blue").removeClass("red").removeClass("orange");
    });
    $("li.charlie").click(function(){
        $(".color").addClass("orange").removeClass("blue").removeClass("red");
    });
    $(".color").click(function(e) {
        var color = $(this).className;
        $(".color").toggleClass('dark' + color);
    });
</script>

我还建议使用className删除所有其他类。

<script>
    $("li.alpha").click(function(){
        $(".color").get(0).className = '';
        $(".color").addClass("red");
    });
    $("li.bravo").click(function(){
        $(".color").get(0).className = '';
        $(".color").addClass("blue");
    });
    $("li.charlie").click(function(){
        $(".color").get(0).className = '';
        $(".color").addClass("orange");
    });
    $(".color").click(function(e) {
        var color = $(this).className;
        $(".color").toggleClass('dark' + color);
    });
</script>

$(".color").get(0).className = '';这将从元素中删除所有类。

使代码更短

<script>
    $("li").click(function(){
        if($(this).hasClass('alpha')) $(".color")[0].className = 'red';
        if($(this).hasClass('bravo')) $(".color")[0].className = 'blue';
        if($(this).hasClass('charlie')) $(".color")[0].className = 'orange';
    );
    $(".color").click(function(e) {
        $(".color").toggleClass('dark' +  $(this).className);
    });
</script>

根据你的小提琴。下面是我的处理方法:https://jsfiddle.net/hp6e0w3z/1/

添加一个data属性来保存要更改的颜色。

<ul>
    <a href="#"> <li class="alpha" data-color="red">A</li> </a>
    <a href="#"> <li class="bravo" data-color="blue">B</li> </a>
    <a href="#"> <li class="charlie" data-color="orange">C</li> </a>
<ul>
    <div class="color"> </div>

，然后在你的javascript中，点击从data属性中获取颜色，并将其设置为全局变量。删除所有以前在颜色div上设置的类，然后重新添加颜色类。(虽然我会让ID='color'，所以你不必担心删除颜色类)。然后添加颜色类。

var color; 
$("li").click(function(){
    color = $(this).data('color');
    $(".color").removeClass().addClass('color').addClass(color);
});
$(".color").on("mousedown mouseup", function(e)
{
    $(".color").toggleClass("dark" + color);
});

你差一点。

$("li.alpha").click(function(){
   $(".color").addClass("red").removeClass("blue").removeClass("orange");
   handleSelected(this, 'red');
});
$("li.bravo").click(function(){
   $(".color").addClass("blue").removeClass("red").removeClass("orange");
   handleSelected(this, 'blue');
});
$("li.charlie").click(function(){
  $(".color").addClass("orange").removeClass("blue").removeClass("red");
  handleSelected(this, 'orange');
});
function handleSelected(li, color) {
  $('.selected').removeClass('selected');
  $('.selected').attr('color','');
  $(li).addClass('selected');
  $(li).attr('color', color);
}
$(".color").on("mousedown mouseup", function(e) {
  var str = $('.selected').attr('color');
  str = 'dark' + str.replace('selected','').trim();
  $(".color").toggleClass(str);
});

你基本上分配一个"选定"类给任何被点击的LI，你添加一个自定义属性到你想要的颜色的LI。这些都是在handleSelection()函数中完成的。

当您单击(DIV class='color')时，您可以获取所选LI标签的自定义属性颜色，并使用"dark"作为前缀，然后切换!

希望有帮助!

您可以检查现有的颜色类名，并在此基础上应用新的类名。

$(".color").on("mousedown mouseup", function(e)
{
  var ele = $(e.target),
  colors = ['blue','red','orange'],
  len = colors.length,
  color='';
  while(len--){ //Cycle through existing classes until a match hits.
    if(ele.hasClass(colors[len])){
      color = 'dark' + colors[len];
      break;
    }
  }
  $(".color").toggleClass(color);
});

更新了上面的例子:https://jsfiddle.net/hp6e0w3z/3/

相关文章：