使用jquery将类添加到id

Question

我有以下html

<div class="col-3">
 <a href="#tab-1">
  <span class="plus" data-tab="tab-1">+</span>
 </a>
</div>
<div class="col-3">
 <a href="#tab-2">
  <span class="plus" data-tab="tab-2">+</span>
 </a>
</div>
<div class="col-3">
 <a href="#tab-3">
  <span class="plus" data-tab="tab-3">+</span>
 </a>
</div>

我想将+更改为- on单击每个加号。

这是演示

http://jsfiddle.net/squidraj/ss2fs5to/9/

任何帮助都是非常感谢的。提前谢谢。

Answer 1

您的href包含一个#符号，如果您希望将其用作选择器的一部分，则需要删除该符号。

您还试图不正确地使用.data()，.data()获取或设置数据属性；它不选择元素。你需要构造你的选择器如下..。

​

 $('.col-3 a').click(function (e) { // Or bind to any other event you like, or call manually
     e.preventDefault();
     var tabid = ($(this).attr("href")).replace('#',''); // remove #
     $('.plus[data-tab=' + tabid + ']').text("-"); // select by data attribute
 });

.col-3 {
    width:100px;
    display:inline-block;
    height:200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-3"> <a href="#tab-1">
      <span class="plus" data-tab="tab-1">+</span>
     </a>

</div>
<div class="col-3"> <a href="#tab-2">
      <span class="plus" data-tab="tab-2">+</span>
     </a>

</div>
<div class="col-3"> <a href="#tab-3">
      <span class="plus" data-tab="tab-3">+</span>
     </a>

</div>

​

这将是一个更简单的选择，然而.

​

$('.col-3 a').click(function (e) { 
     e.preventDefault();
    $(this).find('span').text("-");
 });

.col-3 {
    width:100px;
    display:inline-block;
    height:200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-3"> <a href="#tab-1">
      <span class="plus" data-tab="tab-1">+</span>
     </a>

</div>
<div class="col-3"> <a href="#tab-2">
      <span class="plus" data-tab="tab-2">+</span>
     </a>

</div>
<div class="col-3"> <a href="#tab-3">
      <span class="plus" data-tab="tab-3">+</span>
     </a>

</div>

​

Answer 2

你为什么不用纯css来做这个呢？例如：

.col-3 a:hover .plus {
    display: none;
}

下面是一个小提琴示例链接：http://jsfiddle.net/ss2fs5to/10/

Answer 3

如果您想从"+“更改为"-”，则可以在单击符号时更改文本，如下所示：

 $('.col-3 a').click(function (e) { // Or bind to any other event you like, or call manually

     e.preventDefault();

     $(this).find('span').text('-');

 });

否则，如果您想从"+“切换到"-”，反之亦然，我建议这个解决方案：

<div class="col-3">
    <a href="#tab-1">
        <span class="plus" data-tab="tab-1"></span>
    </a>
</div>


<div class="col-3">
    <a href="#tab-2">
        <span class="plus" data-tab="tab-2"></span>
    </a>
</div>

<div class="col-3">
    <a href="#tab-3">
        <span class="plus" data-tab="tab-3"></span>
    </a>
</div>

CSS

.col-3 {
    width:100px;
    display:inline-block;
    height:200px;
}

.plus:after {
    content: "+";
}

.minus:after {
    content: "-";
}

JS

$('.col-3 a').click(function (e) { // Or bind to any other event you like, or call manually

     e.preventDefault();

     $(this).find('span').toggleClass('plus minus');

 });

这是我的演示