gpt4 book ai didi

javascript - 使用 jQuery 在有效数据上显示提交按钮

转载 作者:行者123 更新时间:2023-12-01 00:21:36 25 4
gpt4 key购买 nike

一旦输入中包含有效文本,我需要显示.nexto按钮。每个字段都有自己的按钮,因此当我获得有效的输入值时,与该字段关联的按钮应该显示,而其他输入字段按钮应该隐藏。谢谢。

var required = $('input[required]');
required.on('keyup', function(event) {
if (this.value !== "") {
$(this).$('.nexto').show();
} else {
$(this).$('.nexto').hide();
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="typeform-element" id="fname">
<p><span class="list">1</span>&#8594;What's your First Name? *</p>
<div class="input-element">
<input type="text" name="fname" placeholder="Type your answer..." required class="ip-element">
<p class="blinker">|</p>
</div>
<div class="ok-btn">
<a href="#lname" class="nexto">OK &#10004;</a>
</div>
</div>
<div class="typeform-element" id="lname">
<p><span class="list">2</span>&#8594;What's Your Last Name? *</p>
<div class="input-element">
<input type="text" name="lname" placeholder="Type your answer..." required class="ip-element">
<p class="blinker">|</p>
</div>
<div class="ok-btn">
<a href="#email" class="nexto">OK &#10004;</a>
</div>
</div>

最佳答案

您查找.nexto元素的方式是错误的。从事件处理程序内的 this 对象中,找到最接近的 .typeform-element,然后找到 .nexto 子对象。

此外,您还需要在开始时隐藏所有 .nexto

$('.nexto').hide()

var required = $('input[required]');
required.on('keyup', function (event) {
var nexto = $(this).closest('.typeform-element').find('.nexto')
if (this.value !== "") {
nexto.show();
} else {
nexto.hide();
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="typeform-element" id="fname">
<p><span class="list">1</span>&#8594;What's your First Name? *</p>
<div class="input-element">
<input type="text" name="fname" placeholder="Type your answer..." required class="ip-element">
<p class="blinker">|</p>
</div>
<div class="ok-btn">
<a href="#lname" class="nexto">OK &#10004;</a>
</div>
</div>

<div class="typeform-element" id="lname">
<p><span class="list">2</span>&#8594;What's Your Last Name? *</p>
<div class="input-element">
<input type="text" name="lname" placeholder="Type your answer..." required class="ip-element">
<p class="blinker">|</p>
</div>
<div class="ok-btn">
<a href="#email" class="nexto">OK &#10004;</a>
</div>
</div>

关于javascript - 使用 jQuery 在有效数据上显示提交按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60340755/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com