Question

使用jQuery替换div内容的最佳方法是什么？以下是我的申请示例：

<div id="size">
    <p>Waiting for item</p>
</div>

选择项目后，大小为size-sml（jquery buttonset）或size-l，具体取决于项目类型。

<div id="size-sml" style="display: none">
    <input id="s_r1" name="radio" type="radio"><label for="s_r1">Small</label>
    <input id="s_r2" name="radio" type="radio"><label for="s_r2">Medium</label>
    <input id="s_r3" name="radio" type="radio"><label for="s_r3">Large</label>
</div>

或

<div id="size-l" style="display: none">
    <label for="liters">Volume in liters: </label>
    <input id="liters">
</div>

我使用.html（）来更改div，但这导致了一个错误“无法在初始化时调用按钮上的方法，尝试调用方法'小部件'”每当我按下一个小的中型大按钮时。常规文本输入正常。

JavaScript的：

var size = $( "#size" );
var types = $( "#types" ); //jQuery buttonset
types.click( function() {
    sizeType = $( "#types :radio:checked" ).attr( "st" );
    if ( sizeType == "G" ) {
        size.html( $( "#size-sml" ).html() );
        size.buttonset();
    } else if ( sizeType == "L" ) {
        size.html( $( "#size-l" ).html() );
    }
});

Answer 1

我不完全确定你做错了什么，或者为什么你得到了这个错误，因为你没有提供#types的标记，或者初始化它的javascript。我从提供的东西中重建了那些碎片，它似乎对我有用。您的代码稍作修改：

Plunk：http://plnkr.co/edit/7dvzrb0Mzpg80bApmTmi?p=preview

$(function(){
  $("#types").buttonset();
  $("#types :radio").click(function(e) {
      var sizeType = $(this).attr( "st" );
      if ( sizeType == "G" ) {
      $("#size").html( $( "#size-sml" ).html() )
                .buttonset();
      } else if ( sizeType == "L" ) {
          ("#size").html( $( "#size-l" ).html() );
      }
    });
});

我认为问题的根源是sizeType = $( "#types :radio:checked" ).attr( "st" ); 不会返回单个结果。因此，我将其放在:radio的子项上，而不是父项上的点击事件。

使用jQuery动态div

1 个答案:

Plunk：http://plnkr.co/edit/7dvzrb0Mzpg80bApmTmi?p=preview