Question

现在已经花了大约六个小时试图让这个工作，并且已经尝试了大约40种不同的jQuery代码变种，没有运气，所以你可以想象，现在开始把我的头发拉出来......

示例（精简）HTML： -

<span class="price-info">
    <span class="price-including-tax">
        <span class="price">£100</span>
    </span>

    <span class="price-excluding-tax">
        <span class="price">£50</span>
    </span>
</span>

<span class="toggle">(Show ex VAT price)</span>

我只是想在点击链接（.toggle）时切换前增值税价格的显示，并更改流程中的文字。

我尝试了jQuery .toggle，.addClass，.removeClass，.show，.hide - 各种各样！

我当前的jQuery脚本如下： -

          $j('.price-info .price-excluding-tax').hide();
            $j('.toggle').click(function() {
              var link = $j('.toggle');
                $j('.price-info .price-excluding-tax').toggle(function() {
                  if ($j('.toggle').is(":visible")) {
                    link.text('Show inc VAT price');
                  } else {
                    link.text('Show ex VAT price');
                  }
                });
            });

目前这是半功能的，因为它会显示增值税的价格，但会立即“滑动”回到视线之外。当我说幻灯片时，上面的.toggle函数会创建一个进出的转换，这样当点击切换时，.price-excluded-tax <span>会以宽度进入/退出视图，高度和不透明度转换，而我只是在简单display: block / display:none;之后this。似乎一旦将函数附加到.toggle，它的功能就会不同。

我怀疑提前增值税价格可能会立即退回到视野之外，因为我默认将其隐藏在$j('.price-info .price-excluding-tax').hide();的视野中，我不知道。

我真的不在乎我现在是否保留上述内容，我只需要一些有用的东西，即显示增值税税率（同时隐藏增值税价格，同时更改切换文字）在同一时间。

在有人要求使用jsFiddle之前，我已经created one已经和.toggle正常工作并且正如我想的那样 - 它只是在相关网站上不起作用（所以在某处可能存在某些干扰，控制台没有错误）。但是，小提琴不会处理文本更改。

Answer 1

针对您的问题的两种可能的解决方案：

解决方案1：

为文本使用2个div，并切换那些..像这样：

<span class="toggleText">(Show ex VAT price)</span>
<span class="toggleText" style="display:none;">(Show inc VAT price)</span>

使用jquery：

$j('.toggle').click(function() {
    $j('.price-info .price-excluding-tax').toggle();
    $j('.toggleText').toggle();
});

jsFiddle

解决方案2：

改善您当前的代码：

$j('.price-excluding-tax').toggle(function() {
    if ($j('.price-excluding-tax').is(":visible")) {
       $j(".toggle").text('Show inc VAT price');
    } else {
       $j(".toggle").text('Show ex VAT price');
    }
});

jsFiddle

Answer 2

你不需要javascript。这个问题有一个 Pure CSS 解决方案。

我已将两个标签连接到一个用作切换按钮的复选框。一个标签使复选框像切换按钮一样工作，另一个显示/隐藏适当的价格。

试试下面的代码段。

.price {
  font-family: "Roboto Slab", serif;
  font-size: 25px;
}
.price::before {
  content: "£";
  float: left;
  margin-top: 5px;
  margin-right: 5px;
}
.price span {
  width: 60px;
  float: left;   
  margin-top: 5px; 
  text-align: right;
}

input#chkTax {
  position: absolute;
  margin-left: -9999px;
  visibility: hidden;
}
input#chkTax + label {
  padding: 2px;
  width: 120px;
  height: 40px;
  cursor: pointer;
}
input#chkTax + label:before,
input#chkTax + label:after {
  display: inline-block;
  position: absolute;
  width: 120px;
  height: 40px;
  left: 100px;
  color: #fff;
  font-family: "Roboto Slab", serif;
  font-size: 20px;
  text-align: center;
  line-height: 40px;
  border-radius: 3px;
  border: 2px solid #ddd;
}
input#chkTax + label:before {
  background-color: #dddddd;
  content: attr(data-off);
  transition: transform 0.5s;
  backface-visibility: hidden;
}
input#chkTax + label:after {
  background-color: #8ce196;
  border-color: #6cc176;
  content: attr(data-on);
  transition: transform 0.5s;
  transform: rotateY(180deg);
  backface-visibility: hidden;
}
input#chkTax:checked + label:before {
  transform: rotateY(180deg);
}
input#chkTax:checked + label:after {
  transform: rotateY(0);
}

input#chkTax + label:hover:before {
    border-color: #bbb;
    background-color: #ccc;
}
input#chkTax + label:hover:after {
    border-color: #1ca136;
    background-color: #7cd186;
}


input#chkTax:checked + label + label .withtax,
.withouttax {
    display: block;
}
input#chkTax:checked + label + label .withouttax,
.withtax {
    display: none;
}

.price-info {
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none;          /* Likely future */     
}

<div class="price-info">
    <input type="checkbox" id="chkTax" />
    <label for="chkTax" class="cool-button" data-on="includes tax" data-off="excludes tax"></label>
    <label for="chkTax" class="price">
        <span class="withtax">
            1,000
        </span>
        <span class="withouttax">
            900
        </span>
    </label>
</div>

阅读更多：

可以找到一篇关于可以做些什么的精彩文章here

使用jQuery显示/隐藏元素，同时更改切换链接

2 个答案: