我指的是这个网站：gesher-jds.org/giving-tuesday
当我单击“立即捐赠”时，href起作用，并且到达正确的位置，“立即捐赠，以后付款”选项也起作用。
但是我确实希望当我单击“立即捐赠，以后付款”选项时，它还会检查下面的“以后付款”选项并打开其他表格。我该怎么做？我仍然希望它转到相同的位置，但也要检查“以后付款”选项并显示其他表格。
谢谢！
<?php /* template name: Custom Form */ ?>
<?php get_header();?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="gesher-sections">
<div class="gesher-section">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-8">
<h1><?php if (get_field('alternate_title')) the_field('alternate_title'); else the_title();?></h1>
<div class="image-div">
<?php the_post_thumbnail(); ?>
</div>
<br />
<div class="gesher-content">
<?php the_content();?>
<div class="new-goal-form">
<div class="donations">
<div class="row d-flex align-items-center">
<div class="multiplier col-lg-5">
<div class="whitebox">
<div class="heading">Your Donation</div>
<div class="row d-flex align-items-center">
<div class="col-md-2 costed">$ <div>USD</div></div>
<div class="col-md-10"><input type="text" id="sample-donation"/></div>
</div>
</div>
<div class="finaldonation">
<span>With Each Donation</span>
Gesher Jewish Day School Gets
<div class="multiplyresult">$0.00</div>
</div>
<a href="#myAnchor" rel="" id="anchor1">Donate Now</a>
</div>
<div class="col-lg-2 seperator">
OR
</div>
<div class="col-lg-5 multi-pay multiplier">
<div class="whitebox">
<div class="heading">Your Donation</div>
<div class="row d-flex align-items-center">
<div class="col-md-2 costed">$ <div>USD</div></div>
<div class="col-md-10"><input type="text" id="sample-donation2"/></div>
</div>
</div>
<div class="finaldonation">
<span>With Each Donation</span>
Gesher Jewish Day School Gets
<div class="multiplyresult2">$0.00</div>
</div>
<a href="#myAnchor" rel="" id="anchor1">Donate Now, Pay Later</a>
<!--<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="exampleModalLongTitle">Please Fill Following Information If You Want To Pay Later</h3>
</div>
<div class="modal-body">
<?php echo do_shortcode('[contact-form-7 id="2703" title="Pay Later Form"]'); ?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>-->
</div>
</div>
</div>
<div name="myAnchor" id="myAnchor">
<?php
$valueform = get_field( "form_short_code" );
echo do_shortcode($valueform);
?>
</div>
</div>
</div>
</div>
<div class="col-md-4 statstics">
<div class="time-remaining">
<h5>Time Remaining</h5>
<div class="clockit">
<div class="row bt">
<div class="col-6" id="days"></div>
<div class="col-6" id="hours"></div>
</div>
<div class="row tb">
<div class="col-6" id="minutes"></div>
<div class="col-6" id="seconds"></div>
</div>
<div class="dot"></div>
</div>
</div>
<?php $valueid = get_field("form_id"); ?>
<?php echo do_shortcode('[give_goal id="'.$valueid.'" show_text="true" show_bar="true"]') ?>
<div class="goalcompletion">
</div>
<div class="donors_info">
<div class="totalenteries"></div>
<?php
$valueid = 2727;
//Get donors based on forms IDs (can be single or multiple forms)
if(function_exists('give_get_payments')) {
$args = array(
'give_forms' => $valueid,
'number' => -1,
);
$donations = give_get_payments( $args );
echo "<table id='dtab'>";
echo "<thead>";
echo "<th align='center'>" . 'Name' . "</th>";
echo "<th align='center'>" . 'Amount' . "</th>";
echo "</thead>";
echo "<tbody>";
$donors = array();
$dtmp=array(); //tmp array
foreach($donations as $donation) {
//Now get donor information from this donation ("customer" aka "donor")
$customer_id = give_get_payment_customer_id( $donation->ID );
$customers = new Give_Customer( $customer_id );
$nameis = $customers->name;
$amt = get_post_meta($donation->ID,'_give_payment_total',false);
$donationAll = 0;
foreach ($amt as $key => $value) {
$donationAll = $donationAll + $value;
}
//Write a tmp array with name as key and donation as value
if(array_key_exists($nameis,$dtmp)) {
//name already exists -> add donation value
$dtmp[$nameis] = $dtmp[$nameis] + $donationAll;
} else {
//name is not in the array -> new array: key name -> donation
$dtmp[$nameis] = $donationAll;
}
$donors[] = $nameis;
}
foreach ($dtmp as $key => $value) {
//iterate the tmp array
echo "<tr class='select'>";
echo "<td align='left'>" . $key . "</td>";
echo "<td align='center'>" . $purchaseis = "$" . $value . "</td>";
echo "</tr>";
}
echo "</tbody>";
echo "</table>";
}
?>
</div>
<div class="time-remaining">
<h5>Share With Your Friends</h5>
<div class="slinks">
<a onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>', 'Facebook Share', 'width=400,height=400')" target="popup" class="thisa" href="javascript:"> <i class="fab fa-facebook-square"></i> </a>
<a onclick="window.open('https://twitter.com/intent/tweet?url=<?php the_permalink(); ?>', 'Twitter Share', 'width=400,height=400')" class="thisa" target="popup" href="javascript:"> <i class="fab fa-twitter-square"></i> </a>
<a onclick="window.open('https://www.linkedin.com/cws/share?url=<?php the_permalink(); ?>', 'Linked In Share', 'width=400,height=400')" class="thisa" target="popup" href="javascript:"> <i class="fab fa-linkedin"></i> </a>
<a onclick="window.open('https://plus.google.com/share?url=<?php the_permalink(); ?>', 'Google Plus Share', 'width=400,height=400')" class="thisa" target="_blank" href="javascript:"><i class="fab fa-google-plus-square"></i> </a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php endwhile; endif;?>
<script>
jQuery(document).ready(function(){
var donationPercentage = jQuery('.give-progress-bar').attr('aria-valuenow');
if (donationPercentage < 26){
jQuery(".goalcompletion").html('<img src="https://www.gesher-jds.org/wp-content/themes/gesher/img/goal1.png" class="img-responsive" />');
}else if (donationPercentage > 25 || donationPercentage < 51){
jQuery(".goalcompletion").html('<img src="https://www.gesher-jds.org/wp-content/themes/gesher/img/goal2.png" class="img-responsive" />');
}else if (donationPercentage > 50 || donationPercentage < 76){
jQuery(".goalcompletion").html('<img src="https://www.gesher-jds.org/wp-content/themes/gesher/img/goal3.png" class="img-responsive" />');
}else if (donationPercentage > 75 || donationPercentage < 100){
jQuery(".goalcompletion").html('<img src="https://www.gesher-jds.org/wp-content/themes/gesher/img/goal4.png" class="img-responsive" />');
}else if (donationPercentage == 100){
jQuery(".goalcompletion").html('<img src="https://www.gesher-jds.org/wp-content/themes/gesher/img/goal5.png" class="img-responsive" />');
}
});
</script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />
<script>
jQuery(document).ready( function () {
var table = jQuery('#dtab').DataTable({
"paging": false,
"info": false,
"scrollY": "400px",
"scrollCollapse": true,
});
var trows = table.rows( '.select' ).count();
jQuery(".totalenteries").html(trows + ' DONORS DONATED TO THIS CAUSE');
jQuery("#sample-donation").keyup(function(){
var keyValue = jQuery(this).val()*2;
var keyValueOriginal = jQuery(this).val();
console.log(keyValue);
jQuery(".multiplyresult").html("$"+keyValue + ".00");
if ( jQuery('#give-amount').length > 0 ) {
jQuery('#give-amount')
.val(keyValueOriginal)
.trigger('blur');
}
/*jQuery("#give-amount").attr("value" , keyValueOriginal + ".00");
jQuery("#give-amount").attr("data-amount" , keyValueOriginal);
jQuery(".give-final-total-amount").html(keyValueOriginal + ".00");
jQuery(".give-final-total-amount").attr("data-total" , keyValueOriginal);
jQuery("input[name=give-price-id]").val(0);*/
});
jQuery('.anchor2').click(function(){
jQuery('#give-card-number-wrap-2676 input').removeAttr('required');
jQuery('#give-card-cvc-wrap-2676 input').removeAttr('required');
jQuery('#give-card-name-wrap-2676 input').removeAttr('required');
jQuery('.card-expiration input').removeAttr('required');
jQuery('#give_cc_fields-2676').hide();
});
jQuery(function($) {
$(".give-donation-level-btn").on('click tap touchstart', function () {
var amount=$(this).val();
//var amountarr = amount.split(".");
//amount = amountarr[0];
$('#sample-donation').val(amount);
var keyValue = $(this).val()*2;
var keyValueOriginal = $(this).val();
console.log(keyValue);
$(".multiplyresult").html("$"+keyValue + ".00");
/*alert(keyValueOriginal);
$("#give-amount").attr("value" , keyValueOriginal + ".00");
$("#give-amount").attr("data-amount" , keyValueOriginal);
$(".give-final-total-amount").html(keyValueOriginal + ".00");
$(".give-final-total-amount").attr("data-total" , keyValueOriginal);*/
});
});
jQuery(document).on('click', 'a[href^="#"]', function (event) {
event.preventDefault();
jQuery('html, body').animate({
scrollTop: jQuery(jQuery.attr(this, 'href')).offset().top
}, 500);
});
//jQuery('#give-donation-level-button-wrap').insertBefore('.donations');
} );
</script>
<script>
// Set the date we're counting down to
var countDownDate = new Date("<?php the_field('donation_timer'); ?>").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Output the result in an element with id="demo"
document.getElementById("days").innerHTML = "<b>" + days +"</b>" + " Days";
document.getElementById("hours").innerHTML = "<b>" + hours +"</b>" + " Hours";
document.getElementById("minutes").innerHTML = "<b>" + minutes +"</b>" + " Mins";
document.getElementById("seconds").innerHTML = "<b>" + seconds +"</b>" + " Sec";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
</script>
<<script> jQuery("#sample-donation2").keyup(function(){
var keyValue = jQuery(this).val()*2;
var keyValueOriginal = jQuery(this).val();
console.log(keyValue);
jQuery(".multiplyresult2").html("$"+keyValue + ".00");
jQuery("#give-amount").attr("value" , keyValueOriginal + ".00");
jQuery("#give-amount").attr("data-amount" , keyValueOriginal);
jQuery(".give-final-total-amount").html(keyValueOriginal + ".00");
jQuery(".give-final-total-amount").attr("data-total" , keyValueOriginal);
if ( jQuery('#give-amount').length > 0 ) {
jQuery('#give-amount')
.val(keyValueOriginal)
.trigger('blur');
}
/*jQuery("#give-amount").attr("value" , keyValueOriginal + ".00");
jQuery("#give-amount").attr("data-amount" , keyValueOriginal);
jQuery(".give-final-total-amount").html(keyValueOriginal + ".00");
jQuery(".give-final-total-amount").attr("data-total" , keyValueOriginal);
jQuery("input[name=give-price-id]").val(0);*/
});
</script>
<style>
ul#give-donation-level-button-wrap li:last-child {
display: none;
}
</style>
<?php get_footer();?>
我认为您在这里有几个问题。对于初学者，两个按钮的ID均为“ anchor1”，而ID在页面上应该是唯一的。
如果将第二个重命名为“ anchor2”，则可以使用类似的方法来实现：
<script>
jQuery(document).ready(function() {
jQuery('#anchor2').on('click', function() {
jQuery('input[name="payment-mode"][value="offline"]').prop("checked", true);
});
});
</script>
此外，您有一些不匹配的类选择器+我认为这里有一些生成的ID，由于它们可能会更改，因此您希望避免使用这些ID。例如，您有此点击处理程序：
jQuery('.anchor2').click(function(){
jQuery('#give-card-number-wrap-2676 input').removeAttr('required');
jQuery('#give-card-cvc-wrap-2676 input').removeAttr('required');
jQuery('#give-card-name-wrap-2676 input').removeAttr('required');
jQuery('.card-expiration input').removeAttr('required');
jQuery('#give_cc_fields-2676').hide();
});
不会触发，因为没有元素属于“ anchor2”类，也不会匹配，因为没有元素* -2676。
您搞砸了一些方面：
一些代码向您展示如何操作收音机：
$(document).on('click', '.btn-donate', function(e) {
$('input:radio[name="payment-mode"]')
.filter('[value="' + $(e.target).attr('id') + '"]')
.prop('checked', true);
// Do your animation stuff
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
<a href="#myAnchor" class="btn-donate" id="now">Donate Now</a>
<a href="#myAnchor" class="btn-donate" id="later">Donate Now, Pay Later</a>
</p>
<div name="myAnchor">
<input type="radio" name="payment-mode" value="now" /> Pay now
<input type="radio" name="payment-mode" value="later" /> Pay later
</div><a href="#myAnchor" rel="" id="anchor1" onclick="document.getElementById('give-gateway-offline-2727-1').checked=true; document.querySelector('#give-gateway-radio-list > li:nth-child(2)').classList.add('give-gateway-option-selected'); document.querySelector('#give-gateway-radio-list > li:nth-child(1)').classList.remove('give-gateway-option-selected');">Donate Now, Pay Later</a>
但是我不确定是否更改了表单，还是仅选中了另一个单选框，而没有其他更改。
关于汤姆