使用切换时更改文本和按钮

Question

目标：
我想隐藏字母表＆＃34; a b c d＆＃34;当它被隐藏时，箭头将向下箭头显示。 https://cdn3.iconfinder.com/data/icons/iconic-1/32/arrow_down_alt1-16.png

它应该是默认设置。

按＆＃34;隐藏文字＆＃34;你切换出来并将箭头按钮更改为upp并显示文本，你也可以更改文本＆＃34;隐藏文字＆＃34;进入＆＃34;显示文字＆＃34;

https://jsfiddle.net/mxt2pthw/15/

＆＃13;

＆＃13;

var flip = 0;
$('#test ').click(function() {
  $( "#aaa" ).toggle( flip++ % 2 === 0 );
});

＆＃13;

<div id="aaa">
a <br/>
b <br/>
c <br/>
d <br/>   
    
 
</div>

<div id="test">
    Test <img src="https://cdn3.iconfinder.com/data/icons/iconic-1/32/arrow_up_alt1-16.png" />
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

https://jsfiddle.net/mxt2pthw/20/

我发现最简单的方法是包含两个图像并隐藏一个图像，然后只需在点击

上切换

<div id="test">
    Test 
    <img src="https://cdn3.iconfinder.com/data/icons/iconic-1/32/arrow_up_alt1-16.png" />
    <img src="https://cdn3.iconfinder.com/data/icons/iconic-1/32/arrow_down_alt1-16.png" style="display: none" />
</div>

在您的演示中，您的计算将反转为数据在加载时的显示方式。 根据额外问题添加了触发器点击。

$('#test ').click(function() {
    $( "#aaa" ).toggle( flip++ % 2 !== 0 ); // <-- i switched this for the example
    $(this).find('img').toggle();
}).trigger('click'); // trigger on page load

Answer 2

您可以使用rotate创建一个css类以使用toggleClass在js中旋转图像：

$('#test').click(function() {
  $("#aaa").toggle();
  $(this).find("img").toggleClass("hide");
});

.hide {
  /* Firefox */
  -moz-transform: rotate(180deg);
  /* Safari and Chrome */
  -webkit-transform: rotate(180deg);
  /* Opera */
  -o-transform: rotate(180deg);
  /* IE9 */
  -ms-transform: rotate(180deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="aaa">a
  <br/>b
  <br/>c
  <br/>d
  <br/>
</div>
<div id="test">Test
  <img src="https://cdn3.iconfinder.com/data/icons/iconic-1/32/arrow_up_alt1-16.png" />
</div>

Answer 3

您可以尝试这种方法：

var flip = 0;
$('#test').click(function() {
  $( "#aaa" ).toggle('slow',function(){
      if(flip++ % 2 === 0){
            $("#arrow").attr("src","https://cdn3.iconfinder.com/data/icons/iconic-1/32/arrow_down_alt1-16.png");
      }else{
            $("#arrow").attr("src","https://cdn3.iconfinder.com/data/icons/iconic-1/32/arrow_up_alt1-16.png");
      }
  });   
});

Answer 4

试试这个演示：

$(function(){
  var info = [{txt:'Hide Text', src:'up', fn: 'show'}, {txt:'Show Text', src:'down', fn: 'hide'}];
  var test = $('#test'), aaa = $('#aaa'), span = test.find('span');
  var img = test.find('img'), i = 0, o;
  $('#test').on('click', function(e) {
    i = (i + 1) % info.length;
    o = info[i];
    img.prop('src',"https://cdn3.iconfinder.com/data/icons/iconic-1/32/arrow_" + o.src + "_alt1-16.png");
    aaa[o.fn]();
    span.text(o.txt);
  }).trigger('click');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="aaa">
  a
  <br/>b
  <br/>c
  <br/>d
  <br/>
</div>

<div id="test">
  <span></span> 
  <img alt="Loading..." />
</div>