使用jQuery

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解决方案：

<强> LIVE DEMO

<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更改为有用的内容，并从输入中删除了不必要的ID。此外，我删除了凌乱的HTML内联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);

<强> LIVE DEMO 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);

<强> LIVE DEMO 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";
});

<强> LIVE DEMO

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

 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;
}

的 And an example can be seen here

<强> jQuery API Documentation can be found here

使用div切换更改图像onclick

3 个答案:

的JavaScript

HTML

PURE CSS

PURE JS

另一个JS版本：

jQuery VERSION

使用jQuery

的 And an example can be seen here

<强> jQuery API Documentation can be found here