Как использовать JavaScript для отображения div при нажатии переключателя в отдельных разделах HTMLJavascript

Форум по Javascript
Ответить
Anonymous
 Как использовать JavaScript для отображения div при нажатии переключателя в отдельных разделах HTML

Сообщение Anonymous »

Я создаю сайт на WordPress, который использует плагин для пожертвований Charitable. На странице пожертвований есть два раздела с двумя наборами переключателей для значений пожертвований. В плагине нет функции, которую я хочу включить, и они не будут поддерживать функцию, которую я пытаюсь создать.
Я хочу отображать некоторый контент, когда пользователь выбирает сумму пожертвования. Я пытался использовать Code Snippets, отдельный плагин, поддерживаемый Charitable, но добился лишь ограниченного прогресса. Меня сдерживают мои ограниченные знания в области кодирования.
У меня есть два фрагмента кода: один на PHP и один на JavaScript. Фрагмент PHP добавляет пользовательский контент в нужное место, а фрагмент JavaScript управляет тем, какой div отображается при нажатии переключателя (сумма пожертвования).
Моя проблема в том, что когда я нажимаю на сумму пожертвования, он отображает содержимое только в HTML-разделе одного пожертвования, но не в HTML-разделе повторяющегося пожертвования. Я пробовал настраивать переключатели другими способами, но у меня ничего не получилось.
Фрагмент PHP
add_action('charitable_donation_form_after_donation_amounts', 'add_custom_content');
function add_custom_content(){
echo 'Single £5 is selected
Single £10 is selected
Single £25 is selected
Single £50 is selected
Single Custom amount is selected';
}

add_action('charitable_recurring_donation_form_after_donation_amounts', 'add_custom_content_rec');
function add_custom_content_rec() {
echo 'Recurring £5 is selected
Recurring £10 is selected
Recurring £25 is selected
Recurring Custom amount is selected';
}

Фрагмент JavaScript
jQuery(function ($) {
var sglAmountSection = document.getElementsByName('donation_amount');

for (var i = 0; i < sglAmountSection.length; i++) {
sglAmountSection.onclick = function() {
$(".sgl-content").css('display', 'none'); // Hide all sgl divs
$(".sgl" + this.value).css('display', 'block'); // Show the selected div
}
}
});

jQuery(function ($) {
var recAmountSection = document.getElementsByName('donation_amount');

for (var i = 0; i < recAmountSection.length; i++) {
recAmountSection.onclick = function() {
$(".rec-content").css('display', 'none'); // Hide all rec divs
$(".rec" + this.value).css('display', 'block'); // Show the selected div
}
}
});

HTML

The minimum donation for this campaign is £5.
Your Donation


  • One Time

  • Monthly




Your monthly Donation



  • £5 / month


  • £10 / month


  • £25 / month



  • Custom amount



Recurring £5 is selected
Recurring £10 is selected
Recurring £25 is selected
Recurring Custom amount is selected




Your One-Time Donation



  • £5


  • £10


  • £25


  • £50


  • Custom amount


Single £5 is selected
Single £10 is selected
Single £25 is selected
Single £50 is selected
Single Custom amount is selected







Подробнее здесь: https://stackoverflow.com/questions/798 ... d-on-separ
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Javascript»