使用jquery

Question

我正在尝试创建一个可以设置HTML元素的内容（值或文本）的函数，而不必担心元素的类型。到目前为止，我已经做到了这一点：

function setContent(elm, value){
    if(elm.is('[value]')){                           
        elm.val(value);
    }else{                                      
        elm.text(value);
    }
}

但问题在于它不适用于select元素。下面添加了工作片段，请您带头？

$(document).ready(function(){
  
    $('#setContent').on('click', function(){           
          $('#setElements').children().each(function( index ) {    
              var newContent = $('#newContent').val();
              setContent($(this), newContent );
          });     
    });                                   
            
});   

function setContent(elm, value){
    if(elm.is('[value]')){                           
        elm.val(value);
    }else{                                      
        elm.text(value);
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Content: <input type="text" id="newContent" value="Two" />
<button id="setContent">Set Content</button>
<hr />
Elemets to set contents:  
<div id="setElements">
  <input type="text" value="This is a Text" />
  <input type="hidden" value="This is a Hidden" />
  <input type="button" value="This is a Button" />
  <button>This is a Button2</button>
  <div>This is a DIV</div>
  <span>SPAN here</span>
  <p>Paragraph</p>
  
  <br>
  Not working on: <select>
        <option value="One">One</option>
        <option value="Two">Two</option>
        <option value="Three">Three</option>
  </select>
</div>

Answer 1

<select>需要附加新的option。像这样修改setContent()

function setContent(elm, value){
        if(elm.is('select') ){
            // empty element, and then append new option
            elm.empty().append( $('<option/>', { value: value, html:value }) );
        } else if(elm.is('[value]')){                           
            elm.val(value);
        }else{                                      
            elm.text(value);
        }
}

＆＃13;

＆＃13;

$(document).ready(function(){
  
    $('#setContent').on('click', function(){           
          $('#setElements').children().each(function( index ) {    
              var newContent = $('#newContent').val();
              setContent($(this), newContent );
          });     
    });                                   
            
});   

function setContent(elm, value){
    if(elm.is('select') ){
        elm.empty().append( $('<option/>', { value: value, html:value }) );
    } else if(elm.is('[value]')){                           
        elm.val(value);
    }else{                                      
        elm.text(value);
    }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Content: <input type="text" id="newContent" value="Two" />
<button id="setContent">Set Content</button>
<hr />
Elemets to set contents:  
<div id="setElements">
  <input type="text" value="This is a Text" />
  <input type="hidden" value="This is a Hidden" />
  <input type="button" value="This is a Button" />
  <button>This is a Button2</button>
  <div>This is a DIV</div>
  <span>SPAN here</span>
  <p>Paragraph</p>
  
  <br>
  Not working on: <select>
        <option value="One">One</option>
        <option value="Two">Two</option>
        <option value="Three">Three</option>
  </select>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以在"[value], :has([value])"条件

时将选择器.is()传递给if

＆＃13;

＆＃13;

$(document).ready(function() {

  $('#setContent').on('click', function() {
    $('#setElements').children().each(function(index) {
      var newContent = $('#newContent').val();
      setContent($(this), newContent);
    });
  });

});

function setContent(elm, value) {
  if (elm.is("[value], :has([value])"))
  {
    elm.val(value);
  } else {
    elm.text(value);
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Content:
<input type="text" id="newContent" value="Two" />
<button id="setContent">Set Content</button>
<hr />Elemets to set contents:
<div id="setElements">
  <input type="text" value="This is a Text" />
  <input type="hidden" value="This is a Hidden" />
  <input type="button" value="This is a Button" />
  <button>This is a Button2</button>
  <div>This is a DIV</div>
  <span>SPAN here</span>
  <p>Paragraph</p>

  <br>Not working on:
  <select>
    <option value="One">One</option>
    <option value="Two">Two</option>
    <option value="Three">Three</option>
  </select>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

请尝试以下脚本

function setContent(elm, value) {
    if (elm.is('select')){
        elm.val(value);
    } else {
        if(elm.is('[value]')){                           
            elm.val(value);
        }else{                                    
            elm.text(value);
        }
    }
}

Answer 4

按如下方式更改setContent函数并尝试

function setContent(elm, value) {   
  var tag = elm[0].tagName;   
  if(['DIV','SPAN','BUTTON','P'].indexOf(tag) >= 0)
    elm.text(value);   
  else if(['INPUT','SELECT'].indexOf(tag) >= 0)
    elm.val(value);    
}