</button> <button class="c1 c2 user-2"></button> <button class="c1 c2 user-3"></button> どのボタンがクリックされたのかわかりますが、どのようにして user-#クラスを取得するのですか? "> </button> <button class="c1 c2 user-2"></button> <button class="c1 c2 user-3"></button> どのボタンがクリックされたのかわかりますが、どのようにして user-#クラスを取得するのですか? "> </button> <button class="c1 c2 user-2"></button> <button class="c1 c2 user-3"></button> どのボタンがクリックされたのかわかりますが、どのようにして user-#クラスを取得するのですか? " />

で始まるjQuery getクラス

私は以下のHTMLを持っています

<button class="c1 c2 user-1"></button>
<button class="c1 c2 user-2"></button>
<button class="c1 c2 user-3"></button>

どのボタンがクリックされたのかわかりますが、どのようにして user-#クラスを取得するのですか?

1
クラスはスクランブルされますか?あなたはattrクラスがスペースを使用してそれを分割することができますそしてそれからあなたが望む最後の要素を取得するpop
追加された 著者 guradio,
クラス名ではなく要素を取得する@guradio
追加された 著者 Rory McCrossan,
(function(){$(this).attr( 'class');}); $( 'button')を使用してください。
追加された 著者 Amit Kumar,

5 答え

一つの方法は、 class 属性値を引き離すために正規表現を使うことです。

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$('button').click(function() {
  var classes = $(this).attr('class');
  var userClass = classes.match(/user\-\d+/gi)[0];
  console.log(userClass);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="c1 c2 user-1"></button>
<button class="c1 c2 user-2"></button>
<button class="c1 c2 user-3"></button>
<button class="c1 c2 user-111 foo1"></button>
</div> </div>

ただし、もっと拡張性があり、柔軟で信頼性の高い解決策は、 user-X 値を要素の data 属性に格納することです。

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$('button').click(function() {
  var user = $(this).data('user');
  console.log(user);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="c1 c2" data-user="user-1"></button>
<button class="c1 c2" data-user="user-2"></button>
<button class="c1 c2" data-user="user-3"></button>
</div> </div>

2
追加された

クラスがOPでそのようになると仮定

あなたはattrクラスがスペースを使用してそれを分割することができますそしてそれからあなたが望む最後の要素を取得するpop

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$("button").click(function() {

  var thisclass = $(this).attr("class")

  alert(thisclass.split(" ").pop())

})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="c1 c2 user-1">1</button>
<button class="c1 c2 user-2">2</button>
<button class="c1 c2 user-3">3</button>
</div> </div>

1
追加された
OPが要素に別のクラスを追加すると、JSが要素に密接に関係していることを覚えていなくても、これは簡単に壊れることに注意してください。
追加された 著者 Rory McCrossan,

これはうまくいくはずです。

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

function getUser(list) {
  
  return list
    .reduce((res, classname) => {
      const re = /user-(\w+)$/;
      const user = re.exec(classname);
      if(user) {
        res.push(user[1]);
      }
      
      return res;
    }, [])
  ;
}

function onButtonsClick(event) {
  const classes = Array.from(event.target.classList);
  
  console.log(getUser(classes));
}

Array
  .prototype
  .forEach
  .call(document.querySelectorAll('button'), element => {
    element.addEventListener('click', onButtonsClick);
  })
;
<button class="c1 c2 user-1">User 1</button>
<button class="c1 c2 user-2">User 2</button>
<button class="c1 c2 user-3">User 3</button>
</div> </div>

0
追加された

ここであなたは解決策を選びます

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$('button').click(function(){
  var allClass = $(this).attr('class').split(' ');
  console.log(allClass[allClass.length - 1]);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="c1 c2 user-1"></button>
<button class="c1 c2 user-2"></button>
<button class="c1 c2 user-3"></button>
</div> </div>

.attr( 'class'); を使用して、クリックしたボタンのすべてのクラスを取得します。 それからそれをスペースに基づいて分割し、配列から最後の要素を取得します。

これがお役に立てば幸いです。

0
追加された

クリックされた class 属性を取得して、次のような正規表現を使用できます。

.replace(/.*(user-\d+).*/g,'$1')

user-#を削除するには、下記のデモをご覧ください

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$('button').click(function(){
  console.log($(this).attr('class').replace(/.*(user-\d+).*/g,'$1'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="c1 c2 user-1">one</button>
<button class="c1 c2 user-2">two</button>
<button class="c1 c2 user-3">three</button>
<button class="user-45 c1 c2">four</button>
</div> </div>

0
追加された
@TheRealPapaこれについてのあなたの考え、ありがとう!
追加された 著者 kukkuz,