Question

我需要这个代码不止一次运行。它仅在我单击按钮添加图像时运行，然后单击按钮将其删除。第三次单击不会再次附加图像

<button class="" onclick="showImages(this,'100000,jpg','1111111.jpg','5');"></button>
<div id="5" class="">
... //when I run the function it appends the <img> tag here
</div>

function showImages(button, image1, image2, id) { //user clicks a button "show"
    if (image2 == "") { //if there is only one image
        $('#show' + id + '').append('<img class=\"one\" src=\"images/' + image1 + '\" />'); //creates a div with 1 image
        button.onclick = function () { //clicks it second time
            $('#show' + id + '').empty(); //removes the div with image
        };
    } else { //if there are 2 images
        $('#show' + id + '').append('<img class=\"two\" src=\"images/' + image1 + '\" /><img src=\"images/' + image2 + '\" />'); //div with 2 images
        button.onclick = function () { //...
            $('#show' + id + '').empty(); //...
        };
    }
}

Answer 1

好吧，既然你编辑了你的帖子，那么最好给你另一个答案。通过此onclick="showImages(this,'100000,jpg','1111111.jpg','5');"，您在按钮单击时附加了一个处理程序。在这个button.onclick = function () { $('#show' + id + '').empty(); };的后面，你再给了一个处理程序。现在你有两个处理程序：其中一个显示图像，另一个立即杀死它。这就是为什么你的代码只能工作一次（直到第二个处理程序没有绑定）。

让我们解决它。 HTML：

<button id="my_button" image_1="10000.jpg" image_2="1111111.jpg" target_id="5"></button> <!-- move away javascript from HTML; put necessary data in button attributes -->
<div id="5">
...
</div>

和Javascript：

var toggleImages = function( event ){

  /* retrieve clicked button itself and all needed attributes */
  var button = $( event.target ),
      image_1 = "images/" + button.attr( 'image_1' ),
      image_2 = "images/" + button.attr( 'image_2' ),
      target = $( '#' + button.attr( 'target_id' ) );

  /* if no images shown – show it */
  if( 0 == target.find( 'img' ).length ){
    target.append( '<img src="' + image_1 + '" />' );
    if( 'undefined' != typeof image_2 ){
      target.append( '<img src="' + image_2 + '" />' );
    }
  /* if images was shown – remove it */
  } else {
    target.empty();
  }
}
$( '#my_button' ).on( 'click', toggleImages ); /* bind click handler only one time */

如何使这个函数运行多次JavaScript / jQuery

1 个答案: