javascript - 如何获取类属性值的一部分？

Question

这是我的 HTML 结构:

<tr>
    <td class="option_name_twitter">Something</td>
    <td class="option_loading">
        <img src="img/checked_successfully.png">
    </td>                        
</tr>
<tr>
    <td class="option_name_instagram">Something else</td>
    <td class="option_loading">
        <img src="img/checked_successfully.png">
    </td>                        
</tr>

这是我的代码:

$(document).on('click', "img[src$='checked_successfully.png']", function () {
    var name = $(this).closest('td.option_loading').sibilings('td.^option_name_').attr('class');
})

我正在尝试获取以 option_name_ 开头的元素的类名值的最后一部分。所以预期的结果是 twitter 或 instagram。我该怎么做？

Answer 1

您可以通过从兄弟 td 获取 class 来实现此目的，使用 _ 将其拆分为数组，然后使用 pop() 关闭最后一个元素以获得所需的值。像这样:

$(document).on('click', "img[src$='checked_successfully.png']", function() {
  var name = $(this).closest('td.option_loading').prev('td').attr('class');
  var site = name.split('_').pop();
  console.log(site);
})

img {
  border: 1px solid red;
  width: 30px;
  height: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="option_name_twitter">Something</td>
    <td class="option_loading">
      <img src="img/checked_successfully.png">
    </td>
  </tr>
  <tr>
    <td class="option_name_instagram">Something else</td>
    <td class="option_loading">
      <img src="img/checked_successfully.png">
    </td>
  </tr>
</table>

但是您应该注意，以这种方式使用 class 字符串并不理想，因为它很容易被破坏。在属性末尾添加另一个类将破坏此代码。一种更好的方法是将您需要的值存储在它自己的数据属性中 - 假设您有权编辑 HTML。