Question

我想删除一个以＆＃34; num＆＃34;开头的类。在jquery。那可能吗？我曾尝试使用^=，但它不起作用。非常感谢你



    $(".dice-roller").click(function() {
      $("[class^='dot']").remove();
      
      $(".dice").removeClass("num1 num2 num3 num4 num5 num6");

              
      var number1 = Math.floor((Math.random() * 6) + 1);
      var number2 = Math.floor((Math.random() * 6) + 1);
     

      for (var i = 0; i < number1; i++) {
        $(".d1").append("<span class='dot dot" + i + "'></span>");

      }
      if (!$(".d1").hasClass("num" + number1)) {

        $(".d1").addClass("num" + number1);
      }
      for (var i = 0; i < number2; i++) {
        $(".d2").append("<span class='dot dot" + i + "'></span>").addClass("num" + number2);
      }

      if (!$(".d2").hasClass("num" + number2)) {

        $(".d2").addClass("num" + number2);
      }
    });
    .dice:first-child{margin-right:20px;}
    .dice{width:100px; height:100px; background:black; border-radius:10px; float:left; position:relative;}
    .dice-roller{position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); cursor:pointer;}
    .dot{width:15px; height:15px; border-radius:100%; background:#fff;display:inline-block; position:absolute;}

    .num1 .dot0{left:50%; top:50%; transform:translate(-50%, -50%);}

    .num2 .dot0{left:15px; top:15px;}
    .num2 .dot1{right:15px; bottom:15px;}


    .num3 .dot0{left:15px; top:15px;}
    .num3 .dot1{right:15px; bottom:15px;}
    .num3 .dot2{left:50%; top:50%; transform:translate(-50%, -50%);}

    .num4 .dot0{left:15px; top:15px;}
    .num4 .dot1{right:15px; bottom:15px;}
    .num4 .dot2{left:15px; bottom:15px;}
    .num4 .dot3{right:15px; top:15px;}

    .num5 .dot0{left:15px; top:15px;}
    .num5 .dot1{right:15px; bottom:15px;}
    .num5 .dot2{left:15px; bottom:15px;}
    .num5 .dot3{right:15px; top:15px;}
    .num5 .dot4{left:50%; top:50%; transform:translate(-50%, -50%);}

    .num6 .dot0{left:15px; top:15px;}
    .num6 .dot1{right:15px; bottom:15px;}
    .num6 .dot2{left:15px; bottom:15px;}
    .num6 .dot3{right:15px; top:15px;}
    .num6 .dot4{right:15px; top:50%; transform:translateY(-50%);}
    .num6 .dot5{left:15px; top:50%; transform:translateY(-50%);}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <div class="dice-roller">
    <div class="dice d1"></div>
    <div class="dice d2"></div>
    </div>

这是我的代码

Answer 1

选项1： 假设你的元素的类名列表真的以class='num..'开头，而不是像class='test num..'那样，每个元素只能出现一次，那么你可以保持简单：

$('[class^="num"]').attr('class', function(i, val){
  return val.replace(/^num\S+/, '');
});

说明：您选择以所希望的类开头的所有元素。然后用空字符串替换类名。

替换的正则表达式意味着：选择以'num'开头的单词以及后面的任何非空白字符。然后用空字符串替换它来删除它。

小提琴：https://jsfiddle.net/j2345091/

另见：https://api.jquery.com/attr/ 和https://api.jquery.com/attribute-starts-with-selector/

选项2：如果您还要涵盖班级名称出现在班级列表中的某些情况，并且也可以多次出现，请写下：

$('[class*="num"]').attr('class', function(i, val){
    return val.replace(/(^|\s)num\S+/g, '');
});

它将首先选择包含所希望的类的任何元素。这里的Regex意味着：在空白后选择以'num'或'num'开头的任何单词。然后获取以下任何非空白字符，并通过用空字符串替换它来删除它。最后的'g'还可以确保处理多次事件。

Answer 2

试试这个，你可以从中得到一个想法。希望这对你有所帮助。

<html>
<head></head>
<title></title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style type="text/css">

div{
  width: 100px;
  height: 100px;
  border: 3px solid black;
  margin: 10px;
  color: white;
  text-align: center;
  font-size: 20px;
  font-family: monospace;
}


.one{
  background-color: orange;
}

.two{
  background-color: purple;
}

.three{
  background-color: pink;
}

.four{
  background-color: yellow;
}



</style>

<body>

<div class="one">class name : one</div>
<div class="two">class name : two</div>
<div class="two">class name: two</div>
<div class="three">class name : three</div>
<div class="four"> class name : four</div>

<br>
<h2>Click on any div, it will remove the styles on class two only</h2>



</body>

<script type="text/javascript">

//to get you and idea , I will remove a specific class in a button click.
$("div").click(function(){
  //get the class name
  var the_class_name = $(this).attr('class');
  alert(the_class_name);

  // now I'm going to remove the class from two
  if(the_class_name == "two")
  {
    $("."+the_class_name).removeClass(the_class_name);
  }


});
 

</script>

</html>

Answer 3

您可以创建一个新选择器，以便选择具有以字符串开头的类名称和 .removeClass（function）的元素，以删除以该字符串开头的类：

jQuery.extend(jQuery.expr[':'], {
  hasClassStartingWith: function(a,i,m) {
    if(m[3] == '') {
      return true;
    }
    var result = $(a).filter(function() {
      var classNames = this.className.split(/\s+/);
      for (var i=0; i<classNames.length; ++i) {
        if (classNames[i].indexOf(m[3]) == 0) {
          return true;
        }
      }
      return false;
    });
    return (result.length == 0) ? false : true;
  }
});


//
// Use the selector and removeClass( function )
//

var classStartingWith = "num";

$('button:hasClassStartingWith("' + classStartingWith + '")').removeClass(function(i, c) {
  var classNames = this.className.split(/\s+/);
  for (var i = 0; i < classNames.length; ++i) {
    if (classNames[i].indexOf(classStartingWith) != 0) {
      classNames[i] = '';
    }
  }
  return classNames.join(' ');
}).each(function() {
  console.log(this.outerHTML);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<button type="button" class="class1 num2 class3">Click Me</button>

<button type="button" class="class1 nuZm2 class3">Click Me</button>

如何删除以特定字符串开头的类？

3 个答案: