2015-03-31 117 views
0

这里是我的情况:我正在开发一个小部件,我正在寻找一种方法来隐藏/显示选择一组单选按钮的不同DIV。我找到了正确的代码并根据我的需要进行了调整。唯一的问题是,隐藏/显示功能停止点击保存在配置窗口小部件后工作:S隐藏/显示单选按钮停止工作保存

这里的JS:

jQuery(document).ready(function($) { 
    $(document).ready(function() { 
     $('input[type="radio"]').click(function(){ 
      if($(this).attr("value")=="link_to_image"){ 
       $(".radio-option").hide(); 
       $(".linked-image").show(); 
      } 
      if($(this).attr("value")=="link_to_page"){ 
       $(".radio-option").hide(); 
       $(".linked-page").show(); 
      } 
     }); 
    }); 
}); 

和HTML:

<p> 
    <label>Link:</label><br> 
    <label> 
     <input type="radio" name="link_to" value="link_to_image"> 
     Link to image 
    </label><br> 
    <label> 
     <input type="radio" name="link_to" value="link_to_page"> 
     Link to page 
    </label> 
</p> 
<div class="linked-image radio-option"> 
    <label for="linked_image">Linked image:</label> 
    <p> 
     Content for linked_image DIV 
    </p> 
</div> 
<div class="linked-page radio-option"> 
    <label for="linked_page">Linked page:</label> 
    <p> 
     Content for linked_page DIV 
    </p> 
</div> 

而[JSFiddle](http://jsfiddle.net/ccwsy5z4/

你能帮我一个忙吗?

+0

你能也许看看你的开发者控制台输出,如果它抛出的错误,同时试图点击点击保存后的单选按钮有用吗? – 2015-03-31 23:21:27

+0

感谢您的帮助,@ JonathanM.Hethey!我自己找到了解决方案。我会写下来,所以我可以标记这个问题解决:) – 2015-04-06 18:44:12

回答

0

因此,最后我发现问题是,通过单击保存按钮,AJ开始AJAX后停止工作。

解决方案是在AJAX完成作业后回想一下JS函数。要做到这一点,我必须给JS函数一个名字,在此之后调用它,然后在AJAX停止后再次调用它。就像这样:

jQuery(document).ready(function($) { 

    function radioButtonShow() { 

     if($(this).attr("value")=="link_to_image") { 
      $(".radio-option").hide(); 
      $(".linked-image").show(); 
     } 

     if($(this).attr("value")=="link_to_page") { 
      $(".radio-option").hide(); 
      $(".linked-page").show(); 
     } 

    }; 

    $('input[type="radio"]').click(radioButtonShow); 

    $(document).ajaxStop(function() { 

     $('input[type="radio"]').click(radioButtonShow); 

    }); 

}); 

希望这可能是有人:)