Question

如何修改此代码以通过“background：image”属性而不是“src”属性添加图像？

<script>
    jQuery(document).ready(function($) {
          var audioElement = document.createElement('audio');
        $( ".audioplay img" ).click(function() {
        audioElement.setAttribute('src', $(this).attr('data-href'));
        if($(this).hasClass('playing')){
            $(this).attr("src","/wp-content/player/play.png"); <<<ADD IMAGE THROUGH THE BACKGROUND:IMAGE
            $('.audioplay img').removeClass("playing");
            audioElement.pause();
        }else{
            $('.audioplay img').removeClass("playing");
            $('.audioplay img').attr("src","/wp-content/player/play.png"); <<<ADD IMAGE THROUGH THE BACKGROUND:IMAGE
            $(this).attr("src","/wp-content/player/stop.png"); <<<ADD IMAGE THROUGH THE BACKGROUND:IMAGE
            $(this).addClass("playing");
            audioElement.play();
        }

        });
    });
</script>

<div class="audioplay"><img data-href="/<?php echo get_post_meta($post->ID, 'mp3', true); ?>" data-name="<?php the_title();?>" src="/wp-content/player/play.png" alt="play now"/></div>

Answer 1

好像你在问这样的事情。如果有任何问题，请尝试并回复。

＆＃13;

jQuery(document).ready(function($) {
  var audioElement = document.createElement('audio');
  $(".audioplay img").click(function() {
    audioElement.setAttribute('src', $(this).attr('data-href'));
    if ($(this).hasClass('playing')) {
      $(this).css("background-img", "path-here"); // Directy add a css style to targetted element.
      $('.audioplay img').removeClass("playing");
      audioElement.pause();
    }
  });
});

＆＃13;

Answer 2

您可以像这样添加

jQuery(document).ready(function($) {
      var audioElement = document.createElement('audio');
    $( ".audioplay img" ).click(function() {
    audioElement.setAttribute('src', $(this).attr('data-href'));
    if($(this).hasClass('playing')){
        $(this).attr("background-image","url('/wp-content/player/play.png')"); <<<ADD IMAGE THROUGH THE BACKGROUND:IMAGE
        $('.audioplay img').removeClass("playing");
        audioElement.pause();
    }else{
        $('.audioplay img').removeClass("playing");
        $('.audioplay img').attr("background-image","url('/wp-content/player/play.png')"); <<<ADD IMAGE THROUGH THE BACKGROUND:IMAGE
        $(this).attr("background-image","url('/wp-content/player/stop.png')"); <<<ADD IMAGE THROUGH THE BACKGROUND:IMAGE
        $(this).addClass("playing");
        audioElement.play();
    }

    });
});

使用jquery中的“background：image”属性更改“src”属性

2 个答案: