我在调用 javascript 时做错了什么？

Question

I have this in html

 <div class="btn-group tags_select"> <a href='' id='<?php echo "plus".$base['id']?>' class='btn btn-flat btn-primary btn-sm'><i class='fa fa-plus'></i><?php if(in_array("manageAsset",$perms)) { echo $base['id']; }?></a> <a href='' id='<?php echo "minus".$asset['id']?>' class='btn btn-flat btn-success btn-sm disabled'><i class='fa fa-minus'></i><?php if(in_array("manageAsset",$perms)) { echo $asset['id']; }?></a> </div>

this is the javascript:

 <script type="text/javascript" language="javascript"> var array = []; var len; $('.tags_select a').click(function() { var value = $(this).text(); var input = $('#asset_array'); if($('plus'+value).click()){ console.log("clicked plus"); document.getElementById('plus'+value).classList.add('disabled') ; document.getElementById('minus'+value).classList.remove('disabled'); if(!array.includes(value)){ array.push(value); console.log(array); input.val(array.toString()); } } else if($('minus'+value).click()){ console.log("clicked minus"); document.getElementById('minus'+value).classList.add('disabled') ; document.getElementById('plus'+value).classList.remove('disabled'); if(array.includes(value)){ array.pop(value); console.log(array); input.val(array.toString()); } } return false; }); </script>

There are 2 buttons, minus is turned off while the plus is on. When i click on plus the minus should be on and plus off ( as it is), but the output for minus gives me only log for ('clicked plus'). Does this mean i need separate id calls in document?

Answer 1

The syntax for your conditional won't work here. You're not going to be able to check whether the link has been clicked by checking if($('plus'+value).click()){ because your conditional is effectively checking the returned value of $('plus'+value).click() and JQuery's click() method returns nothing/null.

What you would be better off checking is the id of the target of the click event. So firstly you would have to include the event as an argument being passed to the click handler like so:

$('.tags_select a').click(function(evt) {

The argument there has information you can access about the event's target, which in this case is the anchor <a> tag that has been clicked.

So what you could check in this case would be the evt.target.id which would contain either "plus" or "minus":

if(evt.target.id.includes("plus")) {
  //proceed with logic for "plus" link having been clicked
} else if(evt.target.id.includes("minus")){
  //proceed with logic for "minus" link having been clicked
}

Mind you, the includes() method I'm using here is vanilla javascript and JQuery may have a call that does the same thing. No harm in mixing the two though.

You can find more information about event.target here if you like: https://developer.mozilla.org/en-US/docs/Web/API/Event/target

Answer 2

当您调用$('minus'+value).click()您正在触发一个点击事件，而不是评估该元素是否被点击。