Question

好的，所以当我添加另一个.empty或向我的.empty添加另一个选择器时，我丢失了我的text元素。如果我没有第二个选择器，我的文字和图像都会显示正常。不知道是什么原因引起的，还应该感谢其他提示。

    $("#dropdown").on("change", function() {
    let select = $('#dropdown').val();
    $.ajax({
    method: 'get',
    url: 'https://api.nytimes.com/svc/topstories/v2/' + select + '.json?api-key=284e1a4e58644ff8b53eb355b79961', 
    })
    .done(function(data) {
    $('.stories-1, .text-1').empty();
    $('.text-1').append(data.results[0].abstract);
    $('.stories-1').append('<img src=' + data.results[0].multimedia[0].url + '>');

    })
    })

    .fail(function(err) {
    throw err;
    })
    $('.stories-1').on('click', function() {
    window.open('<a href=' + data.results[0].url + '>');
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dropdown">
    <option>sections ...</a></option>
    <option value="home">Home</option>
    <option value="arts">Arts</option>
    <option value="business">Business</option>
    <option value="sports">sports</option>
    <option value="technology">Technology</option>
    <option value="fashion">fashion</a></option>
    </select>
<div class="news">
        <section class="stories-1">
            <p class="text-1"></p>
        </section>

Answer 1

您的.stories-1元素包括.text-1元素，因此.text-1元素被以下代码删除。

$('.stories-1, .text-1').empty();

我不太了解您的要求，但是我建议创建一个元素以将图像放入stories-1中。
以下代码创建了.img-1来完成该任务。我还修复了window.open部分和其他部分。请尝试此代码。

js：

$("#dropdown").on("change", function() {
  let select = $('#dropdown').val();
  $.ajax({
    method: 'get',
    url: 'https://api.nytimes.com/svc/topstories/v2/' + select + '.json?api-key=284e1a4e58644ff8b53eb355b79961', 
  })
  .done(function(data) {
    $('.img-1, .text-1').empty();
    $('.text-1').append(data.results[0].abstract);
    $('.img-1').append('<img src=' + data.results[0].multimedia[0].url + '>');
    $('.stories-1').on('click', function() {
      window.open(data.results[0].url);
    });
  })
  .fail(function(err) {
    throw err;
  })
});

html：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dropdown">
    <option>sections ...</a></option>
    <option value="home">Home</option>
    <option value="arts">Arts</option>
    <option value="business">Business</option>
    <option value="sports">sports</option>
    <option value="technology">Technology</option>
    <option value="fashion">fashion</a></option>
    </select>
<div class="news">
    <section class="stories-1">
        <p class="text-1"></p>
        <p class="img-1"></p>
    </section>

当我向.empty添加更多选择器时，元素消失

1 个答案: