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>

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

这是演示

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('-');

 });

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

<强> 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>

<强> 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');

 });

这是我的demo

使用jquery将类添加到id

3 个答案: