Question

所以我设计了一个可以轻松从维基百科中获取结果的应用程序。现在我想要做的是当搜索栏中输入搜索值并点击搜索图标时，我希望搜索栏向上移动并为传入结果创建空间。是的我有一些代码，但它还没有工作。对维基百科的API调用似乎也不起作用，我也需要帮助。以下是Javascript代码：

$(document).ready(function() {

  let searchValue = document.getElementById("#searchString").value;

  $(".sbutton").on("click", function() {
    // code to push the wrap div element and icon up the container
    $(".wrap").animate({
      marginTop: "5px"
    });

    let baseUrl = " https://en.wikipedia.org/w/api.php? ";
    let tailUrl =
      "action=opensearch&format=jsonfm&search=" + searchValue + "&limit=10";
    let wikiLink = baseUrl + tailUrl;

    $.ajax({
      url: wikiLink,
      type: "GET",
      dataType: "json",
      success: function getWikiData(data) {
        let dDiv = document.createElement("div");
        dDiv = "content";
        dDiv.className = "secondDiv";
document.getElementByClassName("container").append(dDiv);
        for (var i = 0; i < data.opensearch.search.length; i++) {
          $("#content").appendChild(
            "<p>" + data.opensearch.search[2].title + "</p>"
          );
        }
      },

      error: function(error) {
        console.log(error);
      }
    });
  });
});

Answer 1

一种方法是在元素中添加一些css。

$(".wrap").css( "marginTop", "5px" );

在此处阅读有关jQuery css的更多信息http://api.jquery.com/css/

确保你调用jQuery，最简单的方法是通过cdn，在这里你去： https://cdnjs.com/libraries/jquery/

这里有工作小提琴 https://jsfiddle.net/6txwmh8L/

Answer 2

$(".wrap").animate({ marginTop: "+=30px"}, 500 );

会更顺畅

如何在执行单击操作时更改元素的位置

2 个答案: