（jQuery）（Bootstrap）图像一直显示在底部

Question

我有图像显示这个问题。图片应显示在卡片的顶部上，但会一直显示在底部上。

$(document).ready(function() {
  $("li:first").click(function () {
    $(".card").show();
    $(".card").append('<img class="card-img-top" src=' + (filmi.Movies[0].Poster) + '/>')

即使在 HTML 中，也可以看到元素的结构从上到下依次正确。点击＆＃34;电影标题＆＃34; 会在div的最后一个位置投放图片。

<div class="col">
        <div class="card" style="width: 20rem;">
          <img class="card-img-top" src="" />
          <div class="card-block">
            <h4 class="card-title"></h4>
            <p class="card-text"></p>
          </div>

  

小提琴JS包括：https://jsfiddle.net/x3jem2fb/

Answer 1

修改您的javascript以使用 prepend（）而非追加（）

Append（）会将元素追加到前一个元素，而 prepend（）则相反。

  $("li:first").click(function () {
    $(".card").prepend('<img class="card-img-top" src=' + (filmi.Movies[0].Poster) + '/>');
    $(".card").show();
  });

<强>无论其

对于您进行的每次点击，这将继续为DOM添加更多元素，因此您可能需要考虑如何处理此问题。

如果您只想更新图像源，可以执行以下操作：

$("li:first").click(function () {
    $(".card").find('.card-img-top')).attr('src',filmi.Movies[0].Poster);
    $(".card").show();  
});

但是您需要一种更加动态的方式来根据您选择的项目选择正确的图像。

有关该特定问题，请参阅this答案：

Answer 2

您只需更新src属性：

  $("li:first").click(function () {
    $($(".card").find('.card-img-top')).attr('src',filmi.Movies[0].Poster)
    $(".card").show();    
  });

工作小提琴：https://jsfiddle.net/x3jem2fb/2/

最终更新，所有电影的工作示例：

  

完整电影列表：

$.each(filmi.Movies,function(i,item){
  $("ul").append('<li class="list-group-item" data-url="'+item.Poster+'">' + (item.Title) + '</li>').attr(item.imdbID)
})

  

show card代码，使用data属性：

$("li").click(function () {
  $($(".card").find('.card-img-top')).attr('src',$(this).data('url'))
  $(".card").show();
});

最终样本：https://jsfiddle.net/x3jem2fb/4/

Answer 3

追加与预先

这可能是因为您使用的是append()而不是prepend()，这与 添加指定内容的情况不同：

• append() - 将内容放置在指定选择器的开头。
• prepend() - 将内容放置在指定选择器的结束处。

因此，只需使用prepend()确保内容在之前显示 其他内容：

$(".card").prepend('<img class="card-img-top" src=' + (filmi.Movies[0].Poster) + '/>');

然而，值得注意的是你已经在那里有一个图像标记，而你似乎想要实际更新这个。如果是这种情况，您可以放弃附​​加或前置任何内容，而是专注于关联要使用的电影。我将在下面提供一个示例，看看它可能是什么样的。

选择更改的示例

至于跟踪单个电影，您可以在构建列表时指定索引：

for(let i = 0; i < filmi.Movies.length; i++){
       // Note setting the data-movie attribute
       $("ul:first").append('<li class="list-group-item" data-movie="' + i + '">' + (filmi.Movies[i].Title) + '</li>').attr(filmi.Movies[i].imdbID);
     $(filmi.Movies[i].imdbID).addClass('list-group-item list-group-item-action')
}

然后，当单击其中一个时，您可以根据此标识符查找正确的海报并相应地更新图像：

// When a movie is selected, update the contents using that card
$("li").on('click',function () {
    // Get the image clicked
    let movie = parseInt(this.getAttribute('data-movie'));

    // Update the image and show it
    $('.card > img:first').attr('src', filmi.Movies[movie].Poster);
    $(".card").show();
});

您可以在下面看到与此相关的代码示例：

var movieIndex = 0;

$(document).ready(function() {
  // Output each available file
  for (let i = 0; i < filmi.Movies.length; i++) {
    $("ul:first").append('<li class="list-group-item" data-movie="' + i + '">' + (filmi.Movies[i].Title) + '</li>').attr(filmi.Movies[i].imdbID);
    $(filmi.Movies[i].imdbID).addClass('list-group-item list-group-item-action')
  }

  // Initially hide your card
  $(".card").hide();

  // When a movie is selected, update the contents using that card
  $("li").on('click', function() {
    // Get the image clicked
    let movie = parseInt(this.getAttribute('data-movie'));

    // Update the image
    $('.card > img:first').attr('src', filmi.Movies[movie].Poster);
    $(".card").show();
  });
});

const filmi = {
  "Movies": [{
      "Title": "La La Land",
      "Year": "2016",
      "Rated": "PG-13",
      "Released": "25 Dec 2016",
      "Runtime": "128 min",
      "Genre": "Comedy, Drama, Music",
      "Director": "Damien Chazelle",
      "Writer": "Damien Chazelle",
      "Actors": "Ryan Gosling, Emma Stone, Amiée Conn, Terry Walters",
      "Plot": "A jazz pianist falls for an aspiring actress in Los Angeles.",
      "Language": "English",
      "Country": "USA, Hong Kong",
      "Awards": "Won 6 Oscars. Another 184 wins & 224 nominations.",
      "Poster": "https://images-na.ssl-images-amazon.com/images/M/MV5BMzUzNDM2NzM2MV5BMl5BanBnXkFtZTgwNTM3NTg4OTE@._V1_SX300.jpg",
      "Ratings": [{
          "Source": "Internet Movie Database",
          "Value": "8.3/10"
        },
        {
          "Source": "Rotten Tomatoes",
          "Value": "93%"
        },
        {
          "Source": "Metacritic",
          "Value": "93/100"
        }
      ],
      "Metascore": "93",
      "imdbRating": "8.3",
      "imdbVotes": "232,825",
      "imdbID": "tt3783958",
      "Type": "movie",
      "DVD": "25 Apr 2017",
      "BoxOffice": "$150,459,658.00",
      "Production": "Liongate Films",
      "Website": "http://www.lalaland.movie/",
      "Response": "True"
    },
    {
      "Title": "Fracture",
      "Year": "2007",
      "Rated": "R",
      "Released": "20 Apr 2007",
      "Runtime": "113 min",
      "Genre": "Crime, Drama, Mystery",
      "Director": "Gregory Hoblit",
      "Writer": "Daniel Pyne (screenplay), Glenn Gers (screenplay), Daniel Pyne (story)",
      "Actors": "Anthony Hopkins, Ryan Gosling, David Strathairn, Rosamund Pike",
      "Plot": "An attorney, intent on climbing the career ladder toward success, finds an unlikely opponent in a manipulative criminal he is trying to prosecute.",
      "Language": "English",
      "Country": "USA, Germany",
      "Awards": "2 wins & 2 nominations.",
      "Poster": "https://images-na.ssl-images-amazon.com/images/M/MV5BMzIzNjQyMzkwM15BMl5BanBnXkFtZTcwOTg5ODQ0MQ@@._V1_SX300.jpg",
      "Ratings": [{
          "Source": "Internet Movie Database",
          "Value": "7.2/10"
        },
        {
          "Source": "Rotten Tomatoes",
          "Value": "71%"
        },
        {
          "Source": "Metacritic",
          "Value": "68/100"
        }
      ],
      "Metascore": "68",
      "imdbRating": "7.2",
      "imdbVotes": "146,665",
      "imdbID": "tt0488120",
      "Type": "movie",
      "DVD": "14 Aug 2007",
      "BoxOffice": "$39,000,000.00",
      "Production": "New Line",
      "Website": "http://www.fracturemovie.com/",
      "Response": "True"
    },
    {
      "Title": "Legend",
      "Year": "2015",
      "Rated": "R",
      "Released": "20 Nov 2015",
      "Runtime": "132 min",
      "Genre": "Biography, Crime, Drama",
      "Director": "Brian Helgeland",
      "Writer": "Brian Helgeland, John Pearson (book)",
      "Actors": "Paul Anderson, Tom Hardy, Christopher Eccleston, Joshua Hill",
      "Plot": "Identical twin gangsters Ronald and Reginald Kray terrorize London during the 1960s.",
      "Language": "English",
      "Country": "UK, France, USA",
      "Awards": "6 wins & 10 nominations.",
      "Poster": "https://images-na.ssl-images-amazon.com/images/M/MV5BMDQ4MGY0NWUtY2MxOC00YzI5LTg0OTEtZjNmY2Q2ZmM0MTA1XkEyXkFqcGdeQXVyNTQzOTc3MTI@._V1_SX300.jpg",
      "Ratings": [{
          "Source": "Internet Movie Database",
          "Value": "7.0/10"
        },
        {
          "Source": "Rotten Tomatoes",
          "Value": "61%"
        },
        {
          "Source": "Metacritic",
          "Value": "55/100"
        }
      ],
      "Metascore": "55",
      "imdbRating": "7.0",
      "imdbVotes": "106,814",
      "imdbID": "tt3569230",
      "Type": "movie",
      "DVD": "01 Mar 2016",
      "BoxOffice": "$14,146,549.00",
      "Production": "Universal Studios",
      "Website": "http://www.legend-the-movie.com/",
      "Response": "True"
    },
    {
      "Title": "Locke",
      "Year": "2013",
      "Rated": "R",
      "Released": "18 Apr 2014",
      "Runtime": "85 min",
      "Genre": "Drama",
      "Director": "Steven Knight",
      "Writer": "Steven Knight",
      "Actors": "Tom Hardy, Olivia Colman, Ruth Wilson, Andrew Scott",
      "Plot": "Ivan Locke, a dedicated family man and successful construction manager, receives a phone call on the eve of the biggest challenge of his career that sets in motion a series of events that threaten his carefully cultivated existence.",
      "Language": "English",
      "Country": "UK, USA",
      "Awards": "7 wins & 31 nominations.",
      "Poster": "https://images-na.ssl-images-amazon.com/images/M/MV5BMTQ1MjE5MzU2M15BMl5BanBnXkFtZTgwNzE4OTMzMTE@._V1_SX300.jpg",
      "Ratings": [{
          "Source": "Internet Movie Database",
          "Value": "7.1/10"
        },
        {
          "Source": "Rotten Tomatoes",
          "Value": "91%"
        },
        {
          "Source": "Metacritic",
          "Value": "81/100"
        }
      ],
      "Metascore": "81",
      "imdbRating": "7.1",
      "imdbVotes": "100,104",
      "imdbID": "tt2692904",
      "Type": "movie",
      "DVD": "12 Aug 2014",
      "BoxOffice": "$1,326,469.00",
      "Production": "A24 Films",
      "Website": "http://www.lockethemovie.com/",
      "Response": "True"
    },
    {
      "Title": "Mad Max: Fury Road",
      "Year": "2015",
      "Rated": "R",
      "Released": "15 May 2015",
      "Runtime": "120 min",
      "Genre": "Action, Adventure, Sci-Fi",
      "Director": "George Miller",
      "Writer": "George Miller, Brendan McCarthy, Nick Lathouris",
      "Actors": "Tom Hardy, Charlize Theron, Nicholas Hoult, Hugh Keays-Byrne",
      "Plot": "A woman rebels against a tyrannical ruler in postapocalyptic Australia in search for her home-land with the help of a group of female prisoners, a psychotic worshipper, and a drifter named Max.",
      "Language": "English, Russian",
      "Country": "Australia, USA",
      "Awards": "Won 6 Oscars. Another 210 wins & 193 nominations.",
      "Poster": "https://images-na.ssl-images-amazon.com/images/M/MV5BMTUyMTE0ODcxNF5BMl5BanBnXkFtZTgwODE4NDQzNTE@._V1_SX300.jpg",
      "Ratings": [{
          "Source": "Internet Movie Database",
          "Value": "8.1/10"
        },
        {
          "Source": "Rotten Tomatoes",
          "Value": "97%"
        },
        {
          "Source": "Metacritic",
          "Value": "90/100"
        }
      ],
      "Metascore": "90",
      "imdbRating": "8.1",
      "imdbVotes": "624,273",
      "imdbID": "tt1392190",
      "Type": "movie",
      "DVD": "01 Sep 2015",
      "BoxOffice": "$129,483,877.00",
      "Production": "Warner Bros.",
      "Website": "http://www.madmaxmovie.com/",
      "Response": "True"
    },
    {
      "Title": "The Wolf of Wall Street",
      "Year": "2013",
      "Rated": "R",
      "Released": "25 Dec 2013",
      "Runtime": "180 min",
      "Genre": "Biography, Comedy, Crime",
      "Director": "Martin Scorsese",
      "Writer": "Terence Winter (screenplay), Jordan Belfort (book)",
      "Actors": "Leonardo DiCaprio, Jonah Hill, Margot Robbie, Matthew McConaughey",
      "Plot": "Based on the true story of Jordan Belfort, from his rise to a wealthy stock-broker living the high life to his fall involving crime, corruption and the federal government.",
      "Language": "English, French",
      "Country": "USA",
      "Awards": "Nominated for 5 Oscars. Another 36 wins & 160 nominations.",
      "Poster": "https://images-na.ssl-images-amazon.com/images/M/MV5BMjIxMjgxNTk0MF5BMl5BanBnXkFtZTgwNjIyOTg2MDE@._V1_SX300.jpg",
      "Ratings": [{
          "Source": "Internet Movie Database",
          "Value": "8.2/10"
        },
        {
          "Source": "Rotten Tomatoes",
          "Value": "77%"
        },
        {
          "Source": "Metacritic",
          "Value": "75/100"
        }
      ],
      "Metascore": "75",
      "imdbRating": "8.2",
      "imdbVotes": "849,538",
      "imdbID": "tt0993846",
      "Type": "movie",
      "DVD": "25 Mar 2014",
      "BoxOffice": "$91,330,760.00",
      "Production": "Paramount Studios",
      "Website": "http://www.thewolfofwallstreet.com/",
      "Response": "True"
    }
  ]
}

.container ul:nth-child(1) li {
  cursor: pointer;
}

html,
body {
  height: 100%;
}

.container {
  min-height: 100%;
}

<!DOCTYPE html>
<html>

<head>
  <script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <link data-require="bootstrap@4.0.5" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
  <link rel="stylesheet" href="style.css" />
  <script src="seznam-filmov.js"></script>
  <script src="script.js"></script>
</head>

<body>
  <h1>List of movies</h1>
  <div class="container">

    <div class="row">

      <div class="col">
        <ul class="list-group"></ul>
        <br />
        <br/>
      </div>

      <div class="col">
        <div class="card" style="width: 20rem;">
          <img class="card-img-top" src="" />
          <div class="card-block">
            <h4 class="card-title"></h4>
            <p class="card-text"></p>
          </div>
          <ul class="list-group list-group-flush"></ul>
          <div class="card-block">
            <a href="#" class="card-link">Spletna stran</a>
            <a href="#" class="card-link">IMDb</a>
          </div>
        </div>
      </div>

    </div>
  </div>
</body>

</html>