Question

我在网页上有一个复选框，可以在不同的jquery代码集之间切换。这是html：

          ... 
        <div class="flip_switch">
          <input type="checkbox" name="flip_switch" class="flip_switch-checkbox" id="myflip_switch" checked ="checked">
          <label class="flip_switch-label" for="myflip_switch">
            <span class="flip_switch-inner"></span>
            <span class="flip_switch-switch"></span>
          </label> 
          </div>
        </div>  
        <p class = "wln_title">Word Learning 1</p>
      </div>
    <div class="wln_container">     
      <div id="wln_col1" class="wln_items">                                            
        <p class="word_learn">1<span class="color_up audio" id="b1e01">the</span>         คำนำหน้านามเจาะจง </span></p>
        <p class="word_learn">2<span class="color_up audio" id="b1e02">and</span>       และ </span></p>
        <p class="word_learn">3<span class="color_up audio" id="b1e03">of</span>         ของ </span></p>
        ...

和jquery片段：

    jQuery('input.flip_switch-checkbox').on("click", function () {
       var checked = jQuery("div.flip_switch  input#myflip_switch").is(':checked');
        if(checked) {
        (listen to audio of all words in sequence ...)
        } else {
        (listen to audio of individually selected words ...)
        }
        });

这个想法是用户可以通过页面上的整个集合顺序地收听单词的音频，或者可以切换到选择要收听的单个单词。问题是2个jquery状态之间的切换仅适用于页面刷新。我尝试按照以下建议使用AJAX进行部分页面刷新：Refreshing one section of a page using Ajax context（链接的简短别名？）具体是：

    jQuery.ajax({
      url: "",
      context: jQuery("div.wln_container")
    }).success(function(data){
      jQuery(this).html(data);
      // jQuery(this) refers to the context object, in this case jQuery(".some-element")
    });

将它放在其他jquery代码之前。所有发生的事情是整个页面被短暂显示然后它挂起。我在其他地方看过并试过jQuery load（）方法，但我无法得到任何有用的东西。我显然在这里错过了一些关键点。

使用checkbox，jQuery和Ajax刷新页面

0 个答案: