jquery脚本冲突



我这里有一个html页面,它使用bootstrap和javascript以及jquery。

<html>
<body>


<button class="btn btn-primary" type="button" id="query1" data-toggle="collapse" data-target="#query" aria-expanded="false" aria-controls="query">
Query/Concern/Suggestions
</button>

<div class="collapse" id="query">
<div class="card card-body">
sample
</div>
</div>

<button class="btn btn-primary"  type="button" id="order1" data-toggle="collapse" data-target="#order" aria-expanded="false" aria-controls="order">
Advanced Order or For Delivery
</button>
<div class="collapse" id="order">
<div class="card card-body">
sample
</div>
</div>
<! ––pera-padala button ––>
<button class="btn btn-primary" type="button" id="pera-padala1" data-toggle="collapse" data-target="#pera-padala" aria-expanded="false" aria-controls="pera-padala">
Smart Pera Padala
</button>
<! ––pera-padala ––>
<div class="collapse" id="pera-padala">
<div class="card card-body">
<form action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSeRxBdj_mH5afO7UGT9fb_o02sSbsFVf6LduIXH_3bRzYJsKg/formResponse">
<div class="form-element">
<span>A. Input ang Account Number ng Smart Padala na inyong papadalan.(Magsulat lamang ng 11 digits kung cellphone number at 16 digits kung account number</span>

<div class="form-element">
<span>B. Input ang amount na ipapadala  </span>
<input name="entry.1812134286" id="padala-bayad"  type="number"  required="">
</div>
<br>
<div class="form-element">
<span>C. Total Babayaran: <span id="padala-result"></span> Magkano po ang inyong ibabayad? Ang charge ay 3% Ex. kung ang pinadala ay ₱1,000 ang charge po ay ₱30 ang total na babayaran ay ₱1,030. Dapat ang perang ibabayad ay pareho o mas mataas sa babayaran. </span>
<input type="number" name="entry.401397408" placeholder="Input Amount" min="0" max="500000" step="any" required="">
</div>
<br>


<button type="submit">Submit</button>
</form>
</div>
</div>

</body>
</html>

我有两个jquery脚本,当我单独使用时,两个脚本都能很好地工作。当我把它们混合在一个html页面中时,问题就出现了。这是我的第一个功能

(function collapse(){
jQuery('#query1,#order1,#pera-padala1,#gh-cash-out1,#paymaya-cash-in1,#claim-padala1,#gh-cash-in1,#E-
load1,#sanla1,#sanla-renew1,#tubos1,#bills-payment1,#repair1,#dl-install1,#paymaya-cash-out1').click( function(e) {
jQuery('.collapse').collapse('hide');
});
})();

当我添加以下内容时,第一个功能不起作用:

`<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
(function compute(){
$('#padala-bayad').keyup(function(){
$('#padala-result').text(parseFloat($('#padala-bayad').val())+(parseFloat($('#padala-bayad').val())*.03));
});
})();

当我删除CDN和第二个脚本时,第一个脚本正在工作。

看起来您没有链接引导css和js文件。。。使用这个源代码(它对我来说非常有效(:

<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>
<body>


<button class="btn btn-primary" type="button" id="query1" data-toggle="collapse" data-target="#query" aria-expanded="false" aria-controls="query">
Query/Concern/Suggestions
</button>

<div class="collapse" id="query">
<div class="card card-body">
sample
</div>
</div>

<button class="btn btn-primary"  type="button" id="order1" data-toggle="collapse" data-target="#order" aria-expanded="false" aria-controls="order">
Advanced Order or For Delivery
</button>
<div class="collapse" id="order">
<div class="card card-body">
sample
</div>
</div>
<! ––pera-padala button ––>
<button class="btn btn-primary" type="button" id="pera-padala1" data-toggle="collapse" data-target="#pera-padala" aria-expanded="false" aria-controls="pera-padala">
Smart Pera Padala
</button>
<! ––pera-padala ––>
<div class="collapse" id="pera-padala">
<div class="card card-body">
<form action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSeRxBdj_mH5afO7UGT9fb_o02sSbsFVf6LduIXH_3bRzYJsKg/formResponse">
<div class="form-element">
<span>A. Input ang Account Number ng Smart Padala na inyong papadalan.(Magsulat lamang ng 11 digits kung cellphone number at 16 digits kung account number</span>

<div class="form-element">
<span>B. Input ang amount na ipapadala  </span>
<input name="entry.1812134286" id="padala-bayad"  type="number"  required="">
</div>
<br>
<div class="form-element">
<span>C. Total Babayaran: <span id="padala-result"></span> Magkano po ang inyong ibabayad? Ang charge ay 3% Ex. kung ang pinadala ay ₱1,000 ang charge po ay ₱30 ang total na babayaran ay ₱1,030. Dapat ang perang ibabayad ay pareho o mas mataas sa babayaran. </span>
<input type="number" name="entry.401397408" placeholder="Input Amount" min="0" max="500000" step="any" required="">
</div>
<br>


<button type="submit">Submit</button>
</form>
</div>
</div>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
(function collapse(){
jQuery('#query1,#order1,#pera-padala1,#gh-cash-out1,#paymaya-cash-in1,#claim-padala1,#gh-cash-in1,#E-load1,#sanla1,#sanla-renew1,#tubos1,#bills-payment1,#repair1,#dl-install1,#paymaya-cash-out1')
.click( function(e) {
jQuery('.collapse').collapse('hide');
});
})();
</script>
<script>
(function compute(){
$('#padala-bayad').keyup(function(){
$('#padala-result').text(parseFloat($('#padala-bayad').val())+(parseFloat($('#padala-bayad').val())*.03));
});
})();
</script>
</body>
</html>

似乎您再次包含jQuery,请从第二个脚本中删除CDN。

<script>
(function compute(){
$('#padala-bayad').keyup(function(){
$('#padala-result').text(parseFloat($('#padala-bayad').val())+(parseFloat($('#padala-bayad').val())*.03));
});
})();
</script>

删除CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

最新更新