jQuery .load结果进入'调用'div（而不是指定的id）？

Question

I'm putting together a rather simple 'vote' function - the user clicks on a link, the 'action' page adds the vote to the DB & returns the number of votes. This is what I currently have;

<a onClick="vote(#tipID#);return-false;" class="post-add-icon inline-items" id="tipVote"><i class="far fa-heart"></i> #tipVotes#</a>

and the JS;

<script>
function vote(num){$("#tipVote").load('/assets/a/vote/?vtype=tip&tipID='+num+'');}
</script>

This all works fine, with one exception - I have several divs named 'tipVote' on the page (output is dynamic). Whilst I can alter the div names by adding an id (ie tipVote999, tipVote232 etc), I have no way of knowing what those ID's will be prior to the output, and of course it would be incredibly 'messy' to duplicate the code for each id.

So, my question is whether either of these is possible;

• Can I somehow restrict the post back to the div that calls it? I did try (without success);

  \nfunction vote(num) { \n   $('this').load('/assets/a/vote/?vtype=tip&tipID=' + num + ''); \n} \n

• Or, can I somehow send a variable with the onclick event that also shows the div for post back. In that vein, I also tried (again without success);

function vote(num){
       $("#tipVote' + num+'").load('/assets/a/vote/?vtype=tip&tipID='+num+'');
    }

I've done a fair amount of searching, but found nothing - but I feel this must be something that's been covered before.

Help & Advice much appreciated in advance!

Answer 1

It looks like you were almost there; the only problem with this was some mis-nested quotes:

function vote(num){
   $("#tipVote" + num).load('/assets/a/vote/?vtype=tip&tipID='+num);
}

Assuming the div id is something like "tipVote123", calling either vote(123) or vote('123') will load the data into that div.

Alternatively, you could read the ID from the DOM instead of passing it as a parameter to the vote function, using whatever DOM traversal gets you from the link the user clicked to the specific div you want filled -- but since it looks like you already have the tipID being passed into the function, may as well use that instead of reading the DOM.

Answer 2

I would do something like this: (assumes '#tipID#' is a dynamically generated unique id)

<div id="div_"+#tipID#>
<a href='#' class="tipVote post-add-icon inline-items" id= #tipID# ><i class="far fa-heart"></i> #tipVotes#</a>
</div>

assumes jQuery

<script>
  $(document).ready(function(){
    $('.tipVote').click(function () {
      var id = $(this).id();

      var jqxhr = $.post( "/assets/a/vote/?vtype=tip&tipID='+id+''", function() {
        //alert( "success" );
        $('#div_'+id).html('<p>Voted</p>');
      })
      .fail(function() {
        alert( "error" );
      });
    });
  });
</script>