如何使用jQuery切换文本和图标？

Question

我有accordion。

点击show details时：

• 手风琴内容将扩大，
• 文字将从show details更改为hide details
• 图标将从+更改为x
• 再次点击它应切换回原始状态。

我无法让它发挥作用。当我点击它时，它永远停留在HIDE DETAILS状态。

JS

 $(".show-details-sk-p").click(function () {
     $(".show-details-txt-sk-p-r").text("HIDE DETAILS");
     $(".icon-sk-p-r-toggle").attr("src", "http://s6.postimg.org/e9eydpbct/remove.png");
 });

有人可以在这里给我一点推动吗？

I've put together a Fiddle - 以防万一需要。

Answer 1

检查了aciton和元素行为，发现#sk-p-r将有in个类来判断它是否已折叠。

 $(".show-details-sk-p").click(function () {
     var isCollapse = $('#sk-p-r').hasClass('in');
     var text = isCollapse ?  'SHOW DETAILS' : 'HIDE DETAILS';
     var img = isCollapse ? 'http://s6.postimg.org/e9eydpbct/plus.png' : 'http://s6.postimg.org/bglqtob0d/remove.png'
     $(".show-details-txt-sk-p-r").text(text);
     $(".icon-sk-p-r-toggle").attr("src", img);
 });

Answer 2

我添加了一个布尔变量，只要点击手风琴就会切换。查看this fiddle

var show=false; //indicates whether the accordion is hidden
$(".show-details-sk-p").click(function () {
if(!show){
 $(".show-details-txt-sk-p-r").text("HIDE DETAILS");
 $(".icon-sk-p-r-toggle").attr("src", "http://s6.postimg.org/e9eydpbct/remove.png");
    show=true;
}
else{
    $(".show-details-txt-sk-p-r").text("SHOW DETAILS");
     $(".icon-sk-p-r-toggle").attr("src", "http://s6.postimg.org/bglqtob0d/plus.png");
    show=false;
}
});

我使用了show变量来确定手风琴上显示的文字。

Answer 3

有很多方法可以做到这一点，但问题是你的“点击”没有任何方法可以从你那里的代码中设置“显示详细信息”状态。

在一个非常简单的解决方案中：

 $(".show-details-sk-p").click(function () {
     $(this).toggleClass('open')
     if($(this).hasClass('open') === true){
         $(".show-details-txt-sk-p-r").text("HIDE DETAILS");
         $(".icon-sk-p-r-toggle").attr("src", "http://s6.postimg.org/e9eydpbct/remove.png");
     }else{
         $(".show-details-txt-sk-p-r").text("SHOW DETAILS");
         $(".icon-sk-p-r-toggle").attr("src", "http://s6.postimg.org/bglqtob0d/plus.png");
     }
 });

这是一种方法。我在这里为元素添加一个类来跟踪状态，然后根据该状态有条件地设置图像和文本，以便为您提供真正的切换。有更聪明，更有效的方法可以做到这一点，但这应该是一个足够简单的例子，可以指出你正确的方向。

Answer 4

只需切换

更好地将字符串值存储在变量

中

var txtHide = "HIDE DETAILS";
var txtShow = "SHOW DETAILS";
var rmvImage = "http://s6.postimg.org/e9eydpbct/remove.png";
var plsImage = "http://s6.postimg.org/bglqtob0d/plus.png";

$(".show-details-sk-p").click(function () {
     $(".show-details-txt-sk-p-r").text($(".show-details-txt-sk-p-r").text()==txtHide ? txtShow :txtHide );
     $(".icon-sk-p-r-toggle").attr("src",$(".icon-sk-p-r-toggle").attr("src")==rmvImage ? plsImage :rmvImage );
});

检查http://jsfiddle.net/ZigmaEmpire/bpaxpuhz/2/

Answer 5

折叠手风琴时需要恢复文字和图像

＆＃13;

＆＃13;

/* JavaScript */
$(".show-details-sk-p").click(function() {
  if ($(this).data('shown') === true) {
    $(this).data('shown', false);
    $(".show-details-txt-sk-p-r").text("SHOW DETAILS");
    $(".icon-sk-p-r-toggle").attr("src", "http://s6.postimg.org/bglqtob0d/plus.png");
  } else {
    $(this).data('shown', true);
    $(".show-details-txt-sk-p-r").text("HIDE DETAILS");
    $(".icon-sk-p-r-toggle").attr("src", "http://s6.postimg.org/e9eydpbct/remove.png");
  }
});

＆＃13;

/* CSS */

.sk-p-dash {
  padding-left: 25px;
}
.panel {
  border-radius: 0px !important;
}
.sk-p {
  margin-right: 16px;
  margin-left: 16px;
}
.panel-title,
.panel-body {
  font-size: 10px;
}
.show-details-txt-sk-p-r {
  padding-right: 12px;
}
.show-details-sk-p {
  font-size: 9px;
  padding-right: 5px;
}
.show-details-sk-p .icon-sk-p-r-toggle {
  margin-top: -5px;
}

＆＃13;

<!-- HTML -->

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="row sk-p">
  <div class="col-md-12">
    <div class="panel-group" id="accordion">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">

            PRE-REQUISITE(S) FOR ALL SKILLS IN EXERCISE

            <span  data-toggle="collapse" data-parent="#accordion" href="#sk-p-r" class="show-details-sk-p pull-right">
              <span class="show-details-txt-sk-p-r">SHOW DETAILS</span>
              <img width="20px" class="icon-sk-p-r-toggle" src="http://s6.postimg.org/bglqtob0d/plus.png">
            </span>

          </h4>
        </div>
        <div id="sk-p-r" class="panel-collapse collapse">
          <div class="panel-body">


            <div class="col-lg-6">
              <span>SOLVING EQUATIONS BY ADDITION OR SUBSTRACTION </span>
              <br>
              <br>
              <div class="sk-p-dash">
                <img width="20px" class="icon-sk-p-r" src="http://s6.postimg.org/m4phsikzh/review_video.png">
                <span>WATCH VIDEO</span>
                <br>
                <br>
                <img width="20px" class="icon-sk-p-r" src="http://s6.postimg.org/6yjg1kuyl/review_pdf.png">
                <span>REVIEW LESSON</span>
              </div>

            </div>


            <div class="col-lg-6">
              <span>GRAPHING INEQUALITIES IN ONE VARIABLE </span>
              <br>
              <br>
              <div class="sk-p-dash">
                <img width="20px" class="icon-sk-p-r" src="http://s6.postimg.org/m4phsikzh/review_video.png">
                <span>WATCH VIDEO</span>
                <br>
                <br>
                <img width="20px" class="icon-sk-p-r" src="http://s6.postimg.org/6yjg1kuyl/review_pdf.png">
                <span>REVIEW LESSON</span>
              </div>

            </div>

          </div>
        </div>
      </div>

    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;