使用div切换更改图像onclick

Question

我有一些我正在研究的代码，根据用户点击图像来切换信息。 我正在寻找的是帮助用户点击时交换图像，然后在再次点击时交换回来。 图像应更改为： https ： //casetest.blackboard.com/bbcswebdav/users/kas200/collapse.gif

在使用JS进行编码时，我是新手，所以提供的任何帮助都将非常感谢！

<script type="text/javascript">
    function toggleMe(a){
        var e=document.getElementById(a);
        if(!e)return true;
        if(e.style.display=="none"){
            e.style.display="block";
        }
        else{
            e.style.display="none";
        }
        return true;
    }
</script>

<input type="image" src="https://casetest.blackboard.com/bbcswebdav/users/kas200/expand.gif" onclick="return toggleMe('para1')" value="Toggle"><br>
<div id="para1" style="display:none">
    This is my text for section 1!
</div>
<br>
<input type="image" src="https://casetest.blackboard.com/bbcswebdav/users/kas200/expand.gif" onclick="return toggleMe('para2')" value="Toggle"><br>
<div id="para2" style="display:none">
    This is my text for section 2!
</div>
<br>
<input type="image" src="https://casetest.blackboard.com/bbcswebdav/users/kas200/expand.gif" onclick="return toggleMe('para3')" value="Toggle"><br>
<span id="para3" style="display:none">
    This is my text for section 3!
</span>

Answer 1

你有正确的想法。 我为这个案例做的是为每个图像添加一个id，其名称为div + _img - 以相同的方式抓取该元素，然后更新src：

JavaScript的

function toggleMe(a){
    var e=document.getElementById(a);
    var i=document.getElementById(a+'_img');
    if(!e)return true;
    if(e.style.display=="none"){
        i.src="https://casetest.blackboard.com/bbcswebdav/users/kas200/collapse.gif"
        e.style.display="block"
    }
    else{
        i.src="https://casetest.blackboard.com/bbcswebdav/users/kas200/expand.gif"
        e.style.display="none"
    }
    return true;
}

HTML

<input type="image" src="https://casetest.blackboard.com/bbcswebdav/users/kas200/expand.gif" onclick="return toggleMe('para1')" value="Toggle" id="para1_img"><br>
<div id="para1" style="display:none">
This is my text for section 1!
</div>
<br>
<input type="image" src="https://casetest.blackboard.com/bbcswebdav/users/kas200/expand.gif" onclick="return toggleMe('para2')" value="Toggle" id="para2_img"><br>
<div id="para2" style="display:none">
This is my text for section 2!
</div>
<br>
<input type="image" src="https://casetest.blackboard.com/bbcswebdav/users/kas200/expand.gif" onclick="return toggleMe('para3')" value="Toggle" id="para3_img"><br>
<span id="para3" style="display:none">
This is my text for section 3!
</span>

这是一个有效的例子： http ： //jsfiddle.net/8h4T7/1/

Answer 2

PURE CSS

没有必要使用JS。 在这里，您将使用简单的HTML / CSS解决方案：

现场演示

<input id="_1" class="toggler" type="checkbox">
<label for="_1"></label>
<div>This is my text for section 1!</div>

CSS：

.toggler,
.toggler + label + div{
  display:none;
}
.toggler + label{
  background: url(https://casetest.blackboard.com/bbcswebdav/users/kas200/expand.gif);
  position:relative;
  display:inline-block;
  width:11px;
  height:11px;
}
.toggler:checked + label{
  background: url(https://casetest.blackboard.com/bbcswebdav/users/kas200/collapse.gif);
}
.toggler:checked + label + div{
  display: block;
}

好的部分是你的图像都被加载到浏览器中，因此不会发生对服务器的无用图像请求（创建时间间隔）而没有可见的图像（当它正在加载时）。

你可以看到诀窍是隐藏checkbox和div ，而不是使用:checked状态你可以做你的技巧。

---

PURE JS

如果你真的想玩JS，那么为了简化HTML标记，需要进行一些更改：

<input type="image" src="https://casetest.blackboard.com/bbcswebdav/users/kas200/expand.gif" value="para1"><br>
<div id="para1" style="display:none">This is my text for section 1!</div>

_{请注意，我已将无用value更改为有用的value ，并从输入中删除了不必要的ID。 此外，我删除了凌乱的HTML inline onclick调用者。 他们很难维持生产。}
input 值现在将帮助我们定位您的ID容器。

var imgSRC = "//casetest.blackboard.com/bbcswebdav/users/kas200/";

function toggleFn(){
    var tog = this.tog = !this.tog;
    var targetEl = document.getElementById(this.value);
    targetEl.style.display = tog ? "block" : "none";
    this.src = imgSRC + (tog?"collapse":"expand") + ".gif";
}

var $para = document.querySelectorAll("[value^=para]");
for(var i=0; i<$para.length; i++) $para[i].addEventListener('click', toggleFn, false);

现场演示1

另一个JS版本：

var imgSRC = "//casetest.blackboard.com/bbcswebdav/users/kas200/";

function toggleFn(){
    var el = document.getElementById(this.value);
    el.style.display = el.style.display=='none' ? "block" : "none";
    this.src = imgSRC +(this.src.match('expand') ? "collapse" : "expand")+ ".gif";
}
var $para = document.querySelectorAll("[value^=para]");
for(var i=0; i<$para.length; i++) $para[i].addEventListener('click', toggleFn, false);

现场演示2

---

jQuery VERSION

与上面的HTML完全相同，这是所需的jQuery代码：

var imgSRC = "//casetest.blackboard.com/bbcswebdav/users/kas200/";

$(':image[value^="para"]').click(function(){
    var tog = this.tog = !this.tog;
    $('#'+ this.value).fadeToggle(); // or use .slideToggle();
    this.src = imgSRC + (tog?"collapse":"expand") + ".gif";
});

现场演示

---

上面代码的有趣部分是我们将当前状态直接存储到this元素引用Object中的方式：

 var tog = thistog = !this.tog;

并使用set negation我们创建切换状态。
相反，如果您熟悉按位XOR运算符 ，则可以使用它（实现相同的），例如：

 var tog = this.t ^= 1;

XOR DEMO

Answer 3

使用jQuery

你也可以使用jQuery。 它是一个旨在帮助年轻程序员的工具。 它允许通过最少的功能来操纵JavaScript。

将<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>到文档的头部将允许您使用jQuery。 然后你可以根据pennstatephil的代码为你的可折叠项添加一些样式，就像这个方法一样。

function toggleMe(a){
    var e=$('#'+a);
    var i=$(a+'_img');
    if(!e) return false;
    if(e.css('display') == "none" ) {
        i.attr('src', 'https://casetest.blackboard.com/bbcswebdav/users/kas200/collapse.gif');
        e.fadeIn('slow');
    }
    else {
        i.attr('src', 'https://casetest.blackboard.com/bbcswebdav/users/kas200/expand.gif');
        e.fadeOut('fast');
    }
    return true;
}

这里可以看到一个例子

可以在此处找到jQuery API文档