如何在 Wordpress 插件中组合 2 个 javascript/jquery 函数

Question

说到 JavaScript/jQuery，我还是个新手。

我目前在 WordPress（插件）中有一个带有 html 列表的捐赠表格。前 3 个选项只是固定选项（5 欧元、10 欧元、15 欧元），但最后一个 li 选项是“开放”选项。单击最后一个 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 在单击时仍然处于活动状态，但隐藏的输入字段不再显示。所以出了点问题。

有谁知道我做错了什么？

提前致谢！

Answer 1

试图通过这个小提琴（重新格式化一些 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>