Button does not appear in all songs

Asked

Viewed 25 times

0

Good staff Here’s the thing, I’m doing javascript buttons to add music to favorites, but the extra button I added and style with css doesn’t appear on all songs, just a few. And another thing, each song, when doing mouse Hover, makes a Hover to highlight the music in which the user is doing Hover, my problem is that the + button also has Hover, and when doing Hover in the + button, the Hover of the music disappears and goes to the music next... Can someone help me?

Thank you!

CSS:

/* BOTOES DE ADICIONAR A PLAYLIST E AOS FAVORITOS */

.option-btn1 {
    position: absolute;
    display: inline;
    top: 50px;
    z-index: 10000;
}


.option-btn1 .btn-add-fav i {
    position: relative;
    left: 300px;
    top: 5px;
    font-size: 200%;
    color: rgba(255, 255, 255, 0.22);
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    z-index: 10000;
}



.option-btn1 .btn-add-fav i:hover {
    color: #74C8D2;
    z-index: 10000;
}

JS: $("#submit"). click(Function(){ if ($("#Artist"). val()!="") {

  query = $("#artist").val()
  let url ="http://musicbrainz.org/ws/2/artist/?query=artist:"+ query +"&fmt=json";
  url=encodeURI(url);

  $.get(url,function(response,status){
    if (status=='success') {
      //alert(response.works)
      //alert(query);
      $(".form").hide();
      $(".div-pesquisa").show();

      $(".div-pesquisa h3").html("You searched for \" " + $("#artist").val() +  " \" ");

      url="http://musicbrainz.org/ws/2/artist/"+ response.artists[0].id +"?inc=releases&fmt=json";
      url=encodeURI(url);
      //alert(url);
      $.get(url,function(response,status){
        if (status=='success') {
          url="http://musicbrainz.org/ws/2/release/"+ response.releases[0].id +"?inc=recordings&fmt=json";
          url=encodeURI(url);
          $.get(url,function(response,status){
            if (status=='success') {
              //for (var i = -1; i < 3 ; i++){


              url ="https://www.googleapis.com/youtube/v3/search?q="+ query + " " +response.media[0].tracks[0].title+"&maxResults=1&part=snippet&key="+youtubeAPIKey;
              url=encodeURI(url);
              //alert(url);
              //alert(i);
                $.get(url,function(response,status){
                  if (status=='success') {
                    //$("#topmusic1 figure img").attr("src", response.items[0].snippet.thumbnails.high.url).css("height", "240px").css("width", "100%");
                    $("#topmusic1 figure div h6").html(response.items[0].snippet.title).css("color", "#FFF");
                    $("#topmusic1 figure").append($("<div>").addClass("option-btn1").append($("<div>").addClass("btn-add-fav").append($("<i>").addClass("ion-ios-add").click(function(){
                      addFav(response.items[0].snippet.title);
                    }))))
                    $("#topmusic1 figure .ion-ios-play-circle").click(function(){
                      $(".div-pesquisa").hide();
                      $(".player").show();
                      $(".player iframe").attr('src', "https://www.youtube.com/embed/"+response.items[0].id.videoId).css("border", "0").css("width", "100%").css("height", "100%");
                    });
                  }
                });


                url ="https://www.googleapis.com/youtube/v3/search?q="+ query + " " +response.media[0].tracks[1].title+"&maxResults=1&part=snippet&key="+youtubeAPIKey;
                url=encodeURI(url);
                //alert(url);
                //alert(i);
                  $.get(url,function(response,status){
                    if (status=='success') {
                     // $("#topmusic2 figure img").attr("src", response.items[0].snippet.thumbnails.high.url).css("height", "240px").css("width", "100%");
                      $("#topmusic2 figure div h6").html(response.items[0].snippet.title).css("color", "#FFF");
                      $("#topmusic2 figure").append($("<div>").addClass("option-btn1").append($("<div>").addClass("btn-add-fav").append($("<i>").addClass("ion-ios-add").click(function(){
                        addFav(response.items[0].snippet.title);
                      }))))
                      $("#topmusic2 figure .ion-ios-play-circle").click(function(){
                        $(".div-pesquisa").hide();
                        $(".player").show();
                        $(".player iframe").attr('src', "https://www.youtube.com/embed/"+response.items[0].id.videoId).css("border", "0").css("width", "100%").css("height", "100%");
                      });
                    }
                  });


                  url ="https://www.googleapis.com/youtube/v3/search?q="+ query + " " +response.media[0].tracks[2].title+"&maxResults=1&part=snippet&key="+youtubeAPIKey;
                  url=encodeURI(url);
                  //alert(url);
                  //alert(i);
                    $.get(url,function(response,status){
                      if (status=='success') {
                       // $("#topmusic3 figure img").attr("src", response.items[0].snippet.thumbnails.high.url).css("height", "240px").css("width", "100%");
                        $("#topmusic3 figure div h6").html(response.items[0].snippet.title).css("color", "#FFF");
                        $("#topmusic3 figure").append($("<div>").addClass("option-btn1").append($("<div>").addClass("btn-add-fav").append($("<i>").addClass("ion-ios-add").click(function(){
                          addFav(response.items[0].snippet.title);
                        }))))
                        $("#topmusic3 figure .ion-ios-play-circle").click(function(){
                          $(".div-pesquisa").hide();
                          $(".player").show();
                          $(".player iframe").attr('src', "https://www.youtube.com/embed/"+response.items[0].id.videoId).css("border", "0").css("width", "100%").css("height", "100%");
                        });
                      }
                    });

              //}
            }
          });

Personal thank you!

  • Include html and an example where the behavior can be reproduced and verified.

  • I don’t have html, because I append these buttons in jquery.

  • But at some point they are rendered in the browser.

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.