如何在 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>