Question

我正在开发一个网络应用程序，该应用程序可使用Music Match Api搜索歌词，但在清除其他执行搜索时会产生结果的div时遇到问题。有人可以帮我吗

此处是脚本

 $(document).ready(function(){

    var results = '';

    $('#submitButton').on('click',function(){

    clearResults(); 
    //get the artist name and tghe track name
    var artistName = $('#searchArtistName').val();
    var songName = $('#searchTrackName').val();
    makeRequest(artistName,songName);
    e.preventDefault();

    });

    function makeRequest(artistName,songName){



    $.ajax({


    url:"https://cors-anywhere.herokuapp.com/https://api.musixmatch.com/ws/1.1/matcher.lyrics.get?q_track="+artistName+"&q_artist="+songName+"&apikey=e87bc35119a5893655c3d0e2c3a4f40b",
    type:'Get',
    dataType:'json'

    }).done(function(response){

    //get the response and then append it to the card
    var message = response.message.body.lyrics.lyrics_body;

    console.log(response);


    results += `

    <div class="col-md-8">
    <div class="card card-custom bg-white border-white z-depth-5" id = "myCard">
    <div class="card-body" style="overflow-y: auto">
    <i class = "fa fa-book fa-2x text-center"></i>
    <h6 class="card-title" style = "font-size:22px;font-family:Comic Sans MS">Album <br>${message}</h6>
    </div>
    <div class="card-footer" style="background: inherit; border-color: inherit;">
    </div>
    </div>
    </div>
     `;

    $('#shower').html(results);

    });

    }

    function clearResults(){

        $("#shower").html('');

    }

    });

这是html文件的一小段，其中有两个输入字段，一个是歌手姓名，另一个是歌曲名称，还有一个提交按钮。

<div class = "container">
           <h4>Search to view lyrics</h4>
            <input type = "text" id = "searchArtistName" style="margin-top: 20px;" class = "form-control" placeholder="Enter Artist Name">
            <input type = "text" id = "searchTrackName" style="margin-top: 20px;" class = "form-control" placeholder="Enter Track Name">
            <br>
            <button type = "submit" class = "btn btn-info btn-lg" id = "submitButton">Search</button>
      </div>
    <div class = "container">
          <div id = "shower" class = "row"></div>
    </div>

Answer 1

它是附加结果的原因，因为您使用result + =而不是result =

更正：

 $(document).ready(function(){

    var results = '';

    $('#submitButton').on('click',function(){
    //get the artist name and tghe track name
    e.preventDefault();
    var artistName = $('#searchArtistName').val();
    var songName = $('#searchTrackName').val();
    makeRequest(artistName,songName);


    });

    function makeRequest(artistName,songName){



    $.ajax({


    url:"https://cors-anywhere.herokuapp.com/https://api.musixmatch.com/ws/1.1/matcher.lyrics.get?q_track="+artistName+"&q_artist="+songName+"&apikey=e87bc35119a5893655c3d0e2c3a4f40b",
    type:'Get',
    dataType:'json'

    }).done(function(response){

    //get the response and then append it to the card
    var message = response.message.body.lyrics.lyrics_body;

    console.log(response);


    results = `

    <div class="col-md-8">
    <div class="card card-custom bg-white border-white z-depth-5" id = "myCard">
    <div class="card-body" style="overflow-y: auto">
    <i class = "fa fa-book fa-2x text-center"></i>
    <h6 class="card-title" style = "font-size:22px;font-family:Comic Sans MS">Album <br>${message}</h6>
    </div>
    <div class="card-footer" style="background: inherit; border-color: inherit;">
    </div>
    </div>
    </div>
     `;

    $('#shower').html(results);

    });

    }


    });

我已经有了clearResults，因为不再需要它了。

Answer 2

以下代码可能会对您有所帮助

function clearResults(){

        $("#shower").children().remove();

    }

进入新搜索时无法清除搜索结果

2 个答案: