當按鈕被點擊時，執行 addQuery("to be execution") 函式，將按鈕屬性“value='class name'”中包含的值添加到函式 addQuery( “被執行”）做。
<div class="test1">test 1</div>
<div class="test2">test 2</div>
<button class="addQuery" value='push-down' onclick='addQuery(".test1")'>button</button>
<button class="addQuery" value='push-up' onclick='addQuery(".test2")'>button</button>
<script type="text/javascript" src="./script.js"></script>
const addQueryclass = document.getElementsByClassName("addQuery");
for (let i = 0; i < addQueryclass.length; i ) {
function addQuery(cwillrun) {
const toadd = addQueryclass[i].value;
document.querySelector(cwillrun).className = ` ${toadd}`;
}
}
在 JavaScript 中應該只有一個函式，在 HTML 中每個元素應該有一個不同的類值。
例如
<div class="test1">test 1</div>
<button class="addQuery" value='push-down' onclick='addQuery(".test1")'>button</button>
<!--When the button is clicked it should be something like this: -->
<div class="test1 push-down">test 1</div>
<button class="addQuery" value='push-down' onclick='addQuery(".test1")'>button</button>
你能在不使用框架的情況下用基本的javascript解決它嗎？
uj5u.com熱心網友回復：
如果我正確理解你想要做什么，它會是這樣的
[...document.getElementsByClassName('addQuery')].forEach(el => {
el.addEventListener('click', e => {
e.preventDefault;
document
.getElementsByClassName(el.dataset.target)[0]
.classList.add(el.dataset.value)
;
});
});<div class="test1">test 1</div>
<div class="test2">test 2</div>
<button class="addQuery" data-target="test1" data-value="push-down">
button 1
</button>
<button class="addQuery" data-target="test2" data-value="push-up">
button 2
</button>uj5u.com熱心網友回復：
你的 html
<div id="test1">1</div>
<div id="test2">test 2</div>
<button class="addQuery" value='push-down' onclick='addQuery("test1")'>button</button>
<button class="addQuery" value='push-up' onclick='addQuery("test2")'>button</button>
<script type="text/javascript" src="./script.js"></script>
在 script.js 上
function addQuery(element){
console.log(document.getElementById(element).innerHTML);
if(isNaN(document.getElementById(element).innerHTML)) document.getElementById(element).innerHTML = 0;
document.getElementById(element).innerHTML = parseInt(document.getElementById(element).innerHTML) 1;
}
你可以試試這里。https://jsfiddle.net/k43xds9r/
uj5u.com熱心網友回復：
如果我理解正確的話，您有兩個按鈕，每個按鈕都有一個值。當用戶點擊一個按鈕時，它的值被添加到相應的div.
為此，我們將更改函式的引數串列以接受按鈕，通過onclick屬性將按鈕本身作為引數發送給函式，然后使用按鈕的值將類添加到div. 請注意，您不應手動將新類添加到className. 這樣，每次用戶單擊按鈕時都會添加該類。相反，我們將簡單地使用classList.add()自動處理此問題的函式。
// 我已經添加了基本的 CSS，所以我們有一個添加類的視覺指示
const addQueryclass = document.getElementsByClassName("addQuery");
function addQuery(button, cwillrun) {
document.querySelector(cwillrun).classList.add(button.value);
}.push-down,
.push-up {
color: red;
}<div class="test1">test 1</div>
<div class="test2">test 2</div>
<button class="addQuery" value='push-down' onclick='addQuery(this, ".test1")'>button</button>
<button class="addQuery" value='push-up' onclick='addQuery(this, ".test2")'>button</button>現在，正如評論中所說，在 HTML 中使用onclick屬性是不好的做法。我們不想混合 HTML（表示）和 JavaScript（行為）。這就是為什么更好的方法是將它們分開，通過在 JavaScript 檔案中撰寫整個事件處理邏輯。
當我們使用onclick屬性時，我們只是將相應專案的類作為引數發送。由于在我們的新方法中我們沒有使用onclick屬性，我們需要將這些類存盤在其他地方：在我們的例子中，是一個data-attribute。
for (const button of document.getElementsByClassName("addQuery")) {
button.addEventListener("click", () => {
document.querySelector(button.dataset.class).classList.add(button.value);
});
}.push-down,
.push-up {
color: red;
}<div class="test1">test 1</div>
<div class="test2">test 2</div>
<button class="addQuery" value="push-down" data-class=".test1">button</button>
<button class="addQuery" value="push-up" data-class=".test2">button</button>Something to consider is that item1 and item2 are classes and no ids. This suggests that you have other items with the same classes (if not, it will be smarter to change those to ids). But since we are using querySelector(), only the first corresponding item will be affected.
for (const button of document.getElementsByClassName("addQuery")) {
button.addEventListener("click", () => {
document.querySelector(button.dataset.class).classList.add(button.value);
});
}.push-down,
.push-up {
color: red;
}<div class="test1">test 1</div>
<div class="test1">test 1</div>
<div class="test2">test 2</div>
<div class="test2">test 2</div>
<button class="addQuery" value="push-down" data-class=".test1">button</button>
<button class="addQuery" value="push-up" data-class=".test2">button</button>If we want all of them to be affected, we should use querySelectorAll() instead (or document.getElementsByClassName), loop through them, and apply our logic to each and every one.
for (const button of document.getElementsByClassName("addQuery")) {
button.addEventListener("click", () => {
document.querySelectorAll(button.dataset.class).forEach(item => {
item.classList.add(button.value)
});
});
}.push-down,
.push-up {
color: red;
}<div class="test1">test 1</div>
<div class="test1">test 1</div>
<div class="test2">test 2</div>
<div class="test2">test 2</div>
<button class="addQuery" value="push-down" data-class=".test1">button</button>
<button class="addQuery" value="push-up" data-class=".test2">button</button>Another thing to consider is that we are only adding classes to the divs. If we want to remove them when clicking again, we could use classList.toggle() instead of classList.add().
And one final thought. This is only one basic way to go. There are many improvements we can make to this code. I strongly suggest that whatever strategy you choose to go for, you then post your final code at Code Review, and get further feedback.
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/359716.html
標籤：javascript html