Question

我有以下Javascript函数用于展开内容的崩溃：

function showAns(inp){

        var hide="#hideAns"+inp;
        var show="#showAns"+inp; 
        var ansdiv ="#ans"+inp;
      $(hide).click(function(){
            $(ansdiv).hide(500);
            $(hide).hide();
            $(show).show();
        });
          $(show).click(function(){
            $(ansdiv).show(500);
            $(hide).show();
            $(show).hide();
        });
    }

从以下生成的HTML代码中调用此函数：

 <div class="qbox">
        <span class="qclass">Q. No.1) This is test question 112
            <img id ="showAns1" class="icons" src="img/expand.png" onclick="javascript:showAns(1)" alt="show" width="20" height="20" style="float:right; cursor:pointer;">
            <img id="hideAns1" class="icons" src="img/collapse.png" onclick="javascript:showAns(1)" alt="hide" width="20" height="20" style="float:right; display:none; cursor:pointer;">
        </span>
        <img alt="image" class="img" src="img/sample.jpg">
        <hr />
        <span id="ans1">This is test answer 112</span>
    </div>
    <br>

    <div class="qbox">
        <span class="qclass">Q. No.2) This is test question 110
            <img id ="showAns2" class="icons" src="img/expand.png" onclick="javascript:showAns(2)" alt="show" width="20" height="20" style="float:right; cursor:pointer;">
            <img id="hideAns2" class="icons" src="img/collapse.png" onclick="javascript:showAns(2)" alt="hide" width="20" height="20" style="float:right; display:none; cursor:pointer;">
        </span>
        <hr />
        <span id="ans2">This is test answer 110</span>
    </div>
    <br>

这里的问题是我必须先点击三次图像然后才展开折叠工作正常。一旦我点击图像两次后，扩展崩溃工作正常。我不知道自己做错了什么，任何帮助都会受到高度赞赏。谢谢。

Answer 1

我建议你使用类选择器并使用jQuery绑定事件。这是一个例子。

HTML 的

<div class="qbox">
    <span class="qclass">QUESTION
        <img class="show icons" src="img/expand.png" alt="show" >
        <img class="hide icons" src="img/collapse.png" alt="hide" >
    </span>
    <hr />
    <span class="ans">Answer</span>
</div>

脚本

$('.qbox .show').click(function(){
    var closestQbox = $(this).closest('.qbox');
    closestQbox.find('.ans').show(500);
    closestQbox.find('.hide').show();
    $(this).hide();
});
$('.qbox .hide').click(function(){
    var closestQbox = $(this).closest('.qbox');
    closestQbox.find('.ans').hide(500);
    closestQbox.find('.show').show();
    $(this).hide();
});

脚本的简化版本

$(".ans, .hide").hide();
$('.qbox .icons').click(function () {
    var closestQbox = $(this).closest('.qbox');
    closestQbox.find('.ans, .hide, .show').toggle();
});

DEMO

Answer 2

你可以这样做

$("[id^=ans]").hide();
$(".icons").click(function(){
    $(this).closest("span").find("img").toggle();
    $(this).closest(".qbox").find("[id^=ans]").slideToggle();
});

Fiddle

Answer 3

试试这段代码：

$(function(){
  $('.icons').click(function(){
        $(this).hide();
        $(this).siblings().show();
        $(this).closest('.qbox').find('[id^=ans]').toggle(500);
  });

});

Javascript函数不能按功能运行

3 个答案: