开关元件的类型，但保持相同的ID

我需要改变元素动态类型和下面是如何我这样做：开关元件的类型，但保持相同的ID

$(function() { 
 
    $('.click_me').click(function(ev) { 
 
    var condition_value_1 = $('#condition_value_1'); 
 
    var select_html = '<select name="condition_value_1" id="condition_value_1"></select>'; 
 
    condition_value_1.after().html(select_html); 
 
    condition_value_1.remove(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
 
<input type="text" id="condition_value_1"> 
 
<span class="click_me">Click Me</span>

变化后的类型，你在看上面的代码段我应该删除前面的元素，但因为它们共享（并且这是强制性的）相同的ID，所以新的SELECT被删除。有什么办法可以避免这种情况？

来源

2016-11-07 ReynierPM

'他们共享（这是强制性的）相同的ID'为什么它是强制性的？这是无效的HTML，当你重复'id'属性时，JS会引发问题（正如你发现的那样）。您应该在切换它们时替换每个“输入”/“选择”。 –

@RoryMcCrossan不，它不会导致问题，因为这个想法是将INPUT打开成SELECT并且它是强制性的，因为如果我更改了值，我可能会涉及更改后端上的许多代码以使其再次工作 – ReynierPM

使用名称属性，而不是ID删除 –

如果你想更换，你可以使用replaceWith ..

$(function() { 
 
    $('.click_me').click(function(ev) { 
 
    var condition_value_1 = $('#condition_value_1'); 
 
    var select_html = '<select name="condition_value_1" id="condition_value_1"></select>'; 
 
    condition_value_1.replaceWith(select_html); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
 
<input type="text" id="condition_value_1"> 
 
<span class="click_me">Click Me</span>

来源

2016-11-07 13:29:16 Keith

哦这个更好，谢谢 – ReynierPM

是的，你应得的 –

使用name属性，而不是ID删除

$(function() { 
    $('.click_me').click(function(ev) { 
    var condition_value_1 = $('#condition_value_1'); 
    var select_html = '<select name="condition_value_1" id="condition_value_1"></select>'; 
    condition_value_1.after().html(select_html); 
    $('[name="ElementNameHere"]')[0].remove(); 
    }); 
});

注意，这将只能删除搜索DOM时遇到的第一个条目。

来源

2016-11-07 13:31:26

开关元件的类型，但保持相同的ID

回答

相关问题