自动折叠可折叠块

时间:2014-05-09 01:20:57

标签: javascript jquery if-statement automation collapse

我在网站上查了一下并没有找到完整的答案,但如何通过if语句自动折叠可折叠块。 这是我目前的if语句的一部分。

$(document).ready(function() {

    $("#testRun").click(function(){

    alert("start");
    var output = "";

    var num1 = "";
    var num2 = "";
    var num3 = "";
    var num4 = "";
    var num5 = "";
    var countnum4 = 0;
    var countnum5 = 0;

    if($('#radio1').is(':checked'))
    {
        num1 = "First Number ";
        $('#blockId').trigger('collapse');
    }
    else if($('#radio2').is(':checked'))
    {
        num1 = "Second Number";
    }
    else if($('#radio3').is(':checked'))
    {
        num1 = "Third";
    }
    else if($('#radio4').is(':checked'))
    {
        num1 = "Fourth";
    }
    else if($('#radio5').is(':checked'))
    {
        num1 = "Fifth";
    }
    else if($('#radio6').is(':checked'))
    {
        num1 = "Sixth";
    }
    else
        num1 = "No numbers selected"//If else for num1 selection


    output = "Your order has been sent. Here are the details of what you ordered"
            + "<br />Number 1: " + num1
            + "<br />Number 2: " + num2
            + "<br />Number 3: " + num3
            + "<br />Number 4: " + num4
            + "<br />Number 5: " + num5;

    $('#show').html(output);

});
});

我需要这个才能工作,所以一旦用户点击他们希望块崩溃的单选按钮,就会打开一个新的按钮。我知道它可能与事件监听器有关,但我不知道如何实现它。 编辑:我已经添加了我目前使用的大部分代码,以便更容易理解我想要做的事情。下面是相应的可折叠块

<div data-role="collapsible-set" id="blockId">
        <div data-role="collapsible" data-collapsed="false" >
          <h3>Numbers</h3>
          <div data-role="fieldcontain">
            <fieldset data-role="controlgroup">
              <legend>Option</legend>
              <input type="radio" name="radio" id="radio1" value="" />
              <label for="radio1">First Number</label>
              <input type="radio" name="radio" id="radio2" value="" />
              <label for="radio2">Second Number</label>
              <input type="radio" name="radio" id="radio3" value="" />
              <label for="radio3">Third Number</label>
              <input type="radio" name="radio" id="radio4" value="" />
              <label for="radio4">Fourth Number</label>
              <input type="radio" name="radio" id="radio5" value="" />
              <label for="radio5">Fifth Number</label>
              <input type="radio" name="radio" id="radio6" value="" />
              <label for="radio6">Sixth Number</label>
            </fieldset>
          </div>
        </div>
      </div> 

任何帮助都将不胜感激。

1 个答案:

答案 0 :(得分:0)

这是load事件的处理程序。在里面,我们为change定义了一个#radio处理程序。在其中我使用了您与我们分享的代码。请注意,$(this)radio元素,因为它在radio元素的change处理程序中使用。另请注意,此时需要num1

$(function() {
    $('#radio1').change(function() {
        if($(this).is(':checked')) {
            num1 = "First Number";
            $('#blockID').trigger('collapse');
        }
    });
});