如何將輸入標簽值替換為 p.para 標簽？請找到我使用過的代碼...
Html 標記：
<h2>jQuery Misc</h2>
<div class="content">
<p>
<a href="#">My link</a>
</p>
<p class="para">This is para no #1</p>
<p>
<strong>Hello world!</strong>
</p>
<button>Action</button>
</div>
查詢：
<script type="text/javascript">
jQuery(function($) {
const $p = $('<p>This is a new para!</p>');
const $contentDiv = $('.content');
$('button').on('click', function() {
const $userName = $('<h3><input type="text" id="input" placeholder="Enter your name"></h3>')
const $okay = $('<button >Okay</button>')
const $cancel = $('<button >Cancel</button>')
// $('.para').remove();
// $contentDiv.append($userName);
$userName.appendTo($contentDiv);
$okay.appendTo($contentDiv);
$cancel.appendTo($contentDiv);
$('.bttn_2').on('click', function() {
$userName.remove();
$okay.remove();
$cancel.remove();
});
$('.bttn').on('click', function() {
$okay.remove();
$cancel.remove();
$userName.appendTo($contentDiv);
$('div.content div.para').text(function() {
return $('input',this).val();
});
});
});
});
</script>
這里我想將輸入標簽值更改為 p.para 元素，那么我應該使用什么代碼？const $userName 在輸入值時替換 p.para 類元素...
請幫助..提前致謝！！
uj5u.com熱心網友回復：
你應該首先需要學習js，在js中變數不是由$創建的
正確的方法
創建變數 const p='<p>This is a new para!</p>'
將字串添加到 div $(.content).append(p)
并且您只能通過 id、類名、采石場選擇器或其 DOM 位置洗掉元素
uj5u.com熱心網友回復：
你可以試試這個代碼：
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($) {
const $p = $('<p>This is a new para!</p>');
const $contentDiv = $('.content');
$('button').on('click', function() {
const $userName = $('<h3><input type="text" id="input" placeholder="Enter your name"></h3>')
const $okay = $('<button >Okay</button>')
const $cancel = $('<button >Cancel</button>')
// $('.para').remove();
// $contentDiv.append($userName);
$userName.appendTo($contentDiv);
$okay.appendTo($contentDiv);
$cancel.appendTo($contentDiv);
$('.bttn_2').on('click', function() {
$userName.remove();
$okay.remove();
$cancel.remove();
});
$('.bttn').on('click', function() {
$okay.remove();
$cancel.remove();
$userName.appendTo($contentDiv);
var input_val = $('#input').val();
$('.para').text(input_val);
});
});
});
</script>
</head>
<body>
<h2>jQuery Misc</h2>
<div class="content">
<p>
<a href="#">My link</a>
</p>
<p class="para">This is para no #1</p>
<p>
<strong>Hello world!</strong>
</p>
<button>Action</button>
</div>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/373264.html
標籤：javascript html 查询