Question

我正在运行一个搜索，在开始时只显示图像和标题等，当点击更多信息按钮时，标题和所选电影的情节显示

当点击该按钮时，我想使用jquery hide函数隐藏所有其他结果，但我的所有参与者都没有工作

我已经包含了我的代码和示例图像，所以你可以看到我来自

enter image description here

代码

<html>
<head>
<title>Sample Seach</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    var url = 'http://api.themoviedb.org/3/',
    mode = 'search/movie',
    input,
    movieName,
    key = '?api_key=API KEY HERE';

    $('#search').click(function() {
        var input = $('#movie').val(),
            movieName = encodeURI(input);
        $.ajax({
            url: url + mode + key + '&query='+movieName ,
            dataType: 'jsonp',
            success: function(data) {

        var table = '<table>';
        $.each( data.results, function( key, value ) {
          table += '<tr><td class="results-img"><img src="http://image.tmdb.org/t/p/w500' + value.poster_path +'" alt="" width="150" height="200"></td><td class="results-title">' + value.original_title + '</td><td class="results-date">' + value.release_date + 
          '</td><td class="results-search-btn"><button class="search-btn" id="MoreInfo">Few More Info</button></td></tr>';
        });
        $('#searchresult').html(table);
            }
        });
    });
});

</script>
<script text="text/javascript">
// When the more button is click this runs a search using the title of the movie it is next to  
$('.search-btn').live('click', '.search-btn', function() {
    getImdbInfo( $(this).closest('tr').find('.results-title').text());
});

//The function below takes the entered title and searchs imdb for a match then it displays as followed

function getImdbInfo(Title) {
    var url = "http://www.omdbapi.com/?t=" + Title + "&plot=full";
    $.ajax({
      url: url,
      cache: false,
      dataType: "jsonp",
      success: function(data) {

            var str = "";
            str += "<h2>Title :" +data.Title+ "</h2>";
            str += "<p>Plot :" +data.Plot+ "</p>";

            $("#chosenresult").html(str);
      },
      error: function (request, status, error) { alert(status + ", " + error); }
    });
}
</script>
</head>
<body>
<center>
<h1>Movie Search</h1>
<input id="movie" type="text" /><button id="search">Search</button>
</center>
<div id="chosenresult"></div>
<div id="searchresult"></div>
</body>
</html>

我试过的隐藏功能

//The button also hides the original search just displaying the info for the selected movie 
  $('.search-btn').live('click', '.search-btn', function() {
    $("#searchresult").hide();
  });

Answer 1

如果您正在使用的代码必须使用＆＃34;＃＆＃34;来引用搜索结果。如果您使用两次实时事件处理程序，则应触发同一句柄中的所有事件：

$('.search-btn').on('click', function() {
getImdbInfo( $(this).closest('tr').find('.results-title').text());
$("#searchresult").hide();
});

你也可以摆脱class参数，没有必要。

编辑：我同意在＆＃39;上使用＆＃39;而不是活着。浏览器将处理它，但并不总是以我们期望的方式处理。

不能让jQuery隐藏起作用

1 个答案: