问题描述
我有两个按钮,它们具有相同的类名和相同的功能,但必须添加不同的输入,所以我使用 from django.contrib.auth.mixins import LoginrequiredMixin
class CreateView(LoginrequiredMixin,CreateView):
model = Post
template_name = 'blog/post_form.html'
fields = ['title','content']
def form_valid(self,form):
form.instance.author = self.request.user
return super().form_valid(form)
和 document.querySelectorAll()
方法来获取它们,但是现在当我单击一个时,另一个也会被点击。有没有办法在两个按钮都没有两个 forEach()
的情况下防止这种情况发生?让它一次只点击一个按钮。
我的代码:
addEventListener
解决方法
实际上并不是“点击”两个按钮。发生的事情如下:
您的 calculateBamboo()
函数循环遍历所有 inputElements:inputElements.forEach()
;并且您正在为所有输入执行逻辑。因此,无论您按下哪个按钮,calculateBamboo()
都会处理每个输入。
使用数据属性传递目标输入将帮助您确定哪个输入属于点击按钮
另外,@JerryBen 是对的,你不需要为每个按钮添加事件监听器,而是我们可以包裹一个元素中的所有按钮,向它添加事件监听器并识别哪个元素被点击。
const wrapper = document.getElementById('wrapper');
const pledgedAmount = document.querySelector('.backed-users');
const backersElement = document.querySelector('.number-of-backers');
wrapper.addEventListener('click',calculateBamboo);
let donationsMade = [];
function calculateBamboo(event) {
/* Here you can access to the event argument,which contains target: the clicked element*/
const el = event.target;
if (el.nodeName !== 'BUTTON' || !el.classList.contains('submitBtn')) {
return;
}
// Get target input from button's data-attr
const targetInput = el.dataset.input;
const inputElement = document.querySelector(`input[data-input="${targetInput}"]`);
// Continue with the code you had...
const inputValue = parseFloat(inputElement.value) || 0;
if (inputValue < 25 || inputValue === '') return alert('Pledge must be at least $25.');
donationsMade.push(inputValue);
const donationsTotal = donationsMade.reduce((a,b) => a += b);
pledgedAmount.textContent = `$${donationsTotal}`;
backersElement.textContent = donationsMade.length;
return donationsTotal;
}
<div class="backed">
<h1 class="backed-users">0</h1>
</div>
<div class="backers">
<h1 class="number-of-backers">0</h1>
</div>
<hr>
<div id="wrapper">
<div class=".pledge-edition">
<div class="pledge">
<section class="pledgeTwo"></section>
<div>
<h2>Bamboo Stand</h2>
<a href="#">Pledge $25 or more</a>
<div>
<h2>101</h2>
<div>left</div>
</div>
</div>
</div>
<p>
You get an ergonomic stand made of natural bamboo. You've helped us launch our promotional campaign,and you’ll be added to a special Backer member list.
</p>
<div class="pledge-amount">
<p>Enter your pledge</p>
<div>
<input class="inputElement bambooInputElement" data-input="1" placeholder="$25" min="25" type="number">
<button class="submitBtn bambooBtn" data-input="1">Continue</button>
</div>
</div>
</div>
<div class=".pledge-edition">
<div class="pledge">
<section class="pledgeThree"></section>
<div>
<h2>Black Edition Stand</h2>
<a href="#">Pledge $75 or more</a>
<div>
<h2>64</h2>
<div>left</div>
</div>
</div>
</div>
<p>
You get a Black Special Edition computer stand and a personal thank you. You’ll be added to our Backer member list. Shipping is included.
</p>
<div class="pledge-amount">
<p>Enter your pledge</p>
<div>
<input class="inputElement bambooInputElement" data-input="2" placeholder="$75" min="75" type="number">
<button class="submitBtn blackEditionBtn" data-input="2" placeholder="$75" min="75">Continue</button>
</div>
</div>
</div>
</div>
向每个按钮添加事件侦听器被认为是一种不好的做法。相反,使用单个事件侦听器来控制它们:
- 将按钮包裹在一个 div 元素中
- 仅将点击事件添加到 div 包装器
- 将
event
对象作为参数传递给处理函数 - 事件处理函数将使用
event.target
来识别点击了哪个特定按钮:
function calculateBamboo(evt){ const inputValue = parseFloat(evt.target.value) }
希望对你有帮助?
,我目前的 JS
function calculateBamboo(target) {
let inputElement = document.querySelector(`input[data-input="${target}"]`);
donationsMade.push(inputElement);
const donationsTotal = donationsMade.reduce((a,b) => a += b);
backersElement.textContent = donationsMade.length;
pledgedAmount.textContent = `$${donationsTotal}`;
successElement.style.display = 'block';
return donationsTotal;
}
submitBtn.forEach(button => {
const target = button.dataset.input;
button.addEventListener('click',calculateBamboo.bind(target));
})
HTML 按钮和输入
<!-- this is how my buttons are placed -->
<div id="wrapper">
<div class=".pledge-edition">
<div class="pledge">
<section class="pledgeTwo"></section>
<div>
<h2>Bamboo Stand</h2>
<a href="#">Pledge $25 or more</a>
<div>
<h2>101</h2>
<div>left</div>
</div>
</div>
</div>
<p>
You get an ergonomic stand made of natural bamboo. You've helped us launch our promotional campaign,and
you’ll be added to a special Backer member list.
</p>
<div class="pledge-amount">
<p>Enter your pledge</p>
<div>
<input class="inputElement bambooInputElement" data-input="1" placeholder="$25" min="25" type="number">
<button class="submitBtn bambooBtn" data-input="1">Continue</button>
</div>
</div>
</div>
<div class=".pledge-edition">
<div class="pledge">
<section class="pledgeThree"></section>
<div>
<h2>Black Edition Stand</h2>
<a href="#">Pledge $75 or more</a>
<div>
<h2>64</h2>
<div>left</div>
</div>
</div>
</div>
<p>
You get a Black Special Edition computer stand and a personal thank you. You’ll be added to our Backer
member list. Shipping is included.
</p>
<div class="pledge-amount">
<p>Enter your pledge</p>
<div>
<input class="inputElement bambooInputElement" data-input="2" placeholder="$75" min="75" type="number">
<button class="submitBtn blackEditionBtn" data-input="2" placeholder="$75" min="75">Continue</button>
</div>
</div>
</div>
输入值时的 HTML
<div class="backed">
<h1 class="backed-users">0</h1>
</div>
<div class="backers">
<h1 class="number-of-backers">0</h1>
</div>