图像只改变一次

时间:2015-12-31 15:02:06

标签: javascript html

所以我有两个箭头图像,我需要在点击(下拉菜单排序)之间切换。

首次单击该按钮可更改图像,但第二次单击不会执行任何操作。

    function toggle_visibility(id) {
        var e = document.getElementById(id);
        if(e.style.display == 'block') {
            e.style.display = 'none';
        } else {
            e.style.display = 'block';
        }
    }

    function toggle_img(img) {
        var i = document.getElementById(img);
        if(i.src = '/Images/arrow1_unclicked.png') {
            i.src = '/Images/arrow1_clicked.png';
        } else {
            i.src = '/Images/arrow1_unclicked.png';}
    	}
    }
    <h1 id="headerSports" onclick="toggle_visibility('hiddenSports'), toggle_img('arrow')">
        Sports     <img id="arrow" src="/Images/arrow1_unclicked.png"/>
    </h1>

    <div id="hiddenSports" class="hiddenText">
        <h2 onclick="toggle_visibility('hiddenNetball')">Netball</h2>
          <h3 id="hiddenNetball" class="hiddenText">Netball</h3>
        <h2 onclick="toggle_visibility('hiddenFootball')">Football</h2>
          <h3 id="hiddenFootball" class="hiddenText">Football</h3>
        <h2 onclick="toggle_visibility('hiddenHockey')">Hockey</h2>
          <h3 id="hiddenHockey" class="hiddenText">Hockey</h3> 
        <h2 onclick="toggle_visibility('hiddenTennis')">Tennis</h2>
          <h3 id="hiddenTennis" class="hiddenText">Tennis</h3>
        <h2 onclick="toggle_visibility('hiddenBadminton')">Badminton</h2>
          <h3 id="hiddenBadminton" class="hiddenText">Badminton</h3>
        <h2 onclick="toggle_visibility('hiddenRugby')">Rugby</h2>
          <h3 id="hiddenRugby" class="hiddenText">Rugby</h3>
    </div>

2 个答案:

答案 0 :(得分:1)

您的if条件是使用单个“=”而是使用“==”或“===”进行比较

答案 1 :(得分:0)

这是你想要达到的目标吗? https://jsfiddle.net/oakley808/eje1rof4/

var unclicked = 'https://pbs.twimg.com/profile_images/378800000563115809/b5bfa0c4b2e8670d09222c17856abef4.jpeg'
var clicked = 'http://www.heromachine.com/wp-content/uploads/2012/12/smily-face.jpg'

function toggle_visibility(img) {

  var e = document.getElementById(img)

  if (e.style.display == 'block') {
    e.style.display = 'none'
  } else {
    e.style.display = 'block'
  }
}

function toggle_img(img) {
  var i = document.getElementById(img)

  if (i.src == unclicked ) {
    i.src = clicked
  } else {
    i.src = unclicked
  }
}