Как объединить 2 функции javascript / jquery в плагине Wordpress

Question

Что касается JavaScript / jQuery, я все еще немного новичок ie.

В настоящее время у меня есть форма пожертвования со списком html в WordPress (плагин) ). Первые 3 варианта являются просто фиксированными (5 евро, 10 евро, 15 евро), но последний вариант li является «открытым». При нажатии на последний li появляется скрытое поле ввода, в котором пользователь может ввести другое значение.

При jQuery мне нужны эти 2 функции:

Первая должен установить li активным при нажатии. Когда задан c li, скрытое поле ввода будет видимым.

Второе - удалить первый символ x и последние символы x слов внутри li.

Это jQuery коды, которые я сейчас использую

Этот код для активного li:

$(".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>