我已經在 uni 設定了一項任務作為對 jQuery 的介紹，并且不能為我的生活，弄清楚如何執行我需要做的事情......
所以任務是：“使用 jQuery 允許用戶輸入顏色，然后單擊“應用”按鈕將用戶輸入的顏色應用到框。”
下面是我給出的 HTML 和 CSS 代碼以及我嘗試組合的 JS。目前，當您將文本放入框中時會觸發更改，然后單擊回傳框，但我無法弄清楚如何在使用“應用”按鈕時發生此操作。
HTML：
<!-- DO NOT MODIFY --->
<div class="form-container">
<input type="text" class="colourInput" placeholder="Type colour here">
<button>Apply</button>
</div>
<div class="box">
</div>
CSS：
/* DO NOT MODIFY */
.form-container {
margin: 0 auto;
width: 235px;
margin-bottom: 20px;
margin-top: 20px;
}
.box {
height: 200px;
width: 200px;
margin: 0 auto;
background-color: #000;
}
我現在的 JS：
// Using jQuery allow users to enter a colour then on click of the "Apply" button apply the user entered colour to the box.
$('.colourInput').on('click', function(){
$('.box').css("background-color", $(this).val());
});
真的無法解決這個問題，所以任何幫助都會很棒！該任務是在 Codepen 中設定的，這就是為什么沒有使用“檔案就緒”元素的原因。
鏈接到任務 CodePen 謝謝
uj5u.com熱心網友回復：
你讓聽眾聽錯了。它需要在按鈕上
$('.form-container button').on('click', function() {
$('.box').css("background-color", $('.form-container input').val());
});
$('.form-container button').on('click', function() {
$('.box').css("background-color", $('.form-container input').val());
});.form-container {
margin: 0 auto;
width: 235px;
margin-bottom: 20px;
margin-top: 20px;
}
.box {
height: 200px;
width: 200px;
margin: 0 auto;
background-color: #000;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- DO NOT MODIFY --->
<div class="form-container">
<input type="text" class="colourInput" placeholder="Type colour here">
<button>Apply</button>
</div>
<div class="box">
</div>uj5u.com熱心網友回復：
你只是在看錯誤的事件。您專注于文本框的單擊事件，而不是按鈕。目標“按鈕”而不是“.colourInput”。
jQuery
$('button').on('click', function() {
$('.box').css("background-color", $('.colourInput').val());
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/433725.html
標籤：javascript html jQuery css