如何在 Wordpress 插件中组合 2 javascript/jquery 个函数
How to combine 2 javascript/jquery functions in a Wordpress plugin
说到JavaScript/jQuery,我还是有点新手。
我目前在 WordPress(插件)中有一个带有 html 列表的捐赠表格。前 3 个选项只是固定选项(5 欧元、10 欧元、15 欧元),但最后一个 li
选项是 "open" 选项。单击最后一个 li
时,会显示一个隐藏的输入字段,用户可以在其中输入不同的值。
使用 jQuery 我需要这两个功能:
第一个是设置li
点击时激活。当特定 li
处于活动状态时,隐藏的输入字段将可见。
第二个是删除li
.
里面的单词的前x个字符和后x个字符
这些是我目前使用的jQuery代码
这一位为活跃李:
$(".donate-box ul li").click(function(){
if (!$(this).hasClass("active")) {
$("li.active").removeClass("active");
$(this).addClass("active");
}
});
此为人物:
$('.donate-box ul li').text(function (i,t) {
return t.slice(0, -72);
});
$('.donate-box ul li').each(function() {
var $th = $(this);
$th.text( $th.text().substr(99) );
});
html : 这是列表选项
<ul id="form_624_field_2" label="" class="" required="">
<li>€ 5,00</li>
<li>€ 10,00</li>
<li>€ 15,00</li>
<li>Anders </li>
</ul>
这是打开选项,当"anders"激活时打开
<p id="rfmp_open_amount_624" style="display:none;">
<label>Bedrag <span style="color:red;">*</span><br>
<span class="rfmp_currency_624">€</span>
<input type="number" step="any" value="" onchange="mollie_forms_624_totals();" name="rfmp_amount_624">
</label>
<input type="hidden" id="rfmp_open_amount_required_624" value="0">
</p>
两者分开工作,但是当我添加第二个代码(用于字符)时,第一个代码停止正常工作。单击 li
仍处于活动状态,但隐藏的输入字段不再显示。所以出了点问题。
有人知道我做错了什么吗?
提前致谢!
试图通过此 fiddle(重新格式化一些 HTML)来解决您的问题,但无法理解您的角色部分。
希望能解决你的问题。
$( document ).ready(function() {
var li_grp = $(".donate-box ul li")
li_grp.text(function (i,t) {
return t.slice(1, -1);
});
li_grp.each(function() {
var $th = $(this);
$th.text( $th.text().substr(0) );
});
li_grp.click(function(){
//alert('ss')
if (!$(this).hasClass("active")) {
$(".donate-box ul li.active").removeClass("active");
$(this).addClass("active");
}
if($(this).hasClass('popup-hidden')){
$('#rfmp_open_amount_624').show()
}else{
$('#rfmp_open_amount_624').hide()
}
});
});
.active{color:red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="donate-box">
<ul id="form_624_field_2" label="" class="" required="">
<li>€ 5,00</li>
<li>€ 10,00</li>
<li>€ 15,00</li>
<li class="popup-hidden">Anders </li>
</ul>
</div>
<p id="rfmp_open_amount_624" style="display:none;">
<label>Bedrag <span style="color:red;">*</span><br>
<span class="rfmp_currency_624">€</span>
<input type="number" step="any" value="" onchange="mollie_forms_624_totals();" name="rfmp_amount_624">
</label>
<input type="hidden" id="rfmp_open_amount_required_624" value="0">
</p>
说到JavaScript/jQuery,我还是有点新手。
我目前在 WordPress(插件)中有一个带有 html 列表的捐赠表格。前 3 个选项只是固定选项(5 欧元、10 欧元、15 欧元),但最后一个 li
选项是 "open" 选项。单击最后一个 li
时,会显示一个隐藏的输入字段,用户可以在其中输入不同的值。
使用 jQuery 我需要这两个功能:
第一个是设置li
点击时激活。当特定 li
处于活动状态时,隐藏的输入字段将可见。
第二个是删除li
.
这些是我目前使用的jQuery代码
这一位为活跃李:
$(".donate-box ul li").click(function(){
if (!$(this).hasClass("active")) {
$("li.active").removeClass("active");
$(this).addClass("active");
}
});
此为人物:
$('.donate-box ul li').text(function (i,t) {
return t.slice(0, -72);
});
$('.donate-box ul li').each(function() {
var $th = $(this);
$th.text( $th.text().substr(99) );
});
html : 这是列表选项
<ul id="form_624_field_2" label="" class="" required="">
<li>€ 5,00</li>
<li>€ 10,00</li>
<li>€ 15,00</li>
<li>Anders </li>
</ul>
这是打开选项,当"anders"激活时打开
<p id="rfmp_open_amount_624" style="display:none;">
<label>Bedrag <span style="color:red;">*</span><br>
<span class="rfmp_currency_624">€</span>
<input type="number" step="any" value="" onchange="mollie_forms_624_totals();" name="rfmp_amount_624">
</label>
<input type="hidden" id="rfmp_open_amount_required_624" value="0">
</p>
两者分开工作,但是当我添加第二个代码(用于字符)时,第一个代码停止正常工作。单击 li
仍处于活动状态,但隐藏的输入字段不再显示。所以出了点问题。
有人知道我做错了什么吗?
提前致谢!
试图通过此 fiddle(重新格式化一些 HTML)来解决您的问题,但无法理解您的角色部分。 希望能解决你的问题。
$( document ).ready(function() {
var li_grp = $(".donate-box ul li")
li_grp.text(function (i,t) {
return t.slice(1, -1);
});
li_grp.each(function() {
var $th = $(this);
$th.text( $th.text().substr(0) );
});
li_grp.click(function(){
//alert('ss')
if (!$(this).hasClass("active")) {
$(".donate-box ul li.active").removeClass("active");
$(this).addClass("active");
}
if($(this).hasClass('popup-hidden')){
$('#rfmp_open_amount_624').show()
}else{
$('#rfmp_open_amount_624').hide()
}
});
});
.active{color:red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="donate-box">
<ul id="form_624_field_2" label="" class="" required="">
<li>€ 5,00</li>
<li>€ 10,00</li>
<li>€ 15,00</li>
<li class="popup-hidden">Anders </li>
</ul>
</div>
<p id="rfmp_open_amount_624" style="display:none;">
<label>Bedrag <span style="color:red;">*</span><br>
<span class="rfmp_currency_624">€</span>
<input type="number" step="any" value="" onchange="mollie_forms_624_totals();" name="rfmp_amount_624">
</label>
<input type="hidden" id="rfmp_open_amount_required_624" value="0">
</p>