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

所以，我正在设计一个应用程序，它可以很容易地从维基百科获取结果。现在我首先要做的是，当搜索值输入到搜索栏中，我点击搜索图标时，我希望搜索栏向上移动，并为传入的结果创建空间。是的，我有一些代码，但它还不起作用。另外，对wikipedia的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);
      }
    });
  });
});

$（文档）.ready（函数（）{
让searchValue=document.getElementById（“#searchString”）.value；
$（“.sbutton”）。打开（“单击”，函数（）{
//代码将wrap div元素和图标向上推到容器中
$（“.wrap”）.animate({
玛金托普：“5px”
});
让baseUrl=”https://en.wikipedia.org/w/api.php? ";
让tailUrl=
“action=opensearch&format=jsonfm&search=“+searchValue+”&limit=10”；
让wikiLink=baseUrl+tailUrl；
$.ajax({
网址：wikiLink，
键入：“获取”，
数据类型：“json”，
成功：函数getWikiData（数据）{
设dDiv=document.createElement（“div”）；
dDiv=“内容”；
dDiv.className=“secondDiv”；
document.getElementByClassName（“容器”）.append（dDiv）；
for（var i=0；i”
);
}
},
错误：函数（错误）{
console.log（错误）；
}
});
});
});

一种方法是向元素添加一些css

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

在这里阅读更多关于jQueryCSS的信息

确保您也调用jQuery，最简单的方法是通过cdn，如下所示：

这是你的小提琴

---

将更加顺畅

两个建议都不起作用。我似乎不知道问题出在哪里。你的.wrap类对象似乎有一个绝对位置？我昨天从其他ajax代码中隔离了“.wrap”，它成功了。我还更改了'let searchValue=document.getElementById（“#searchString”）.value；'让searchValue=document.getElementById（“searchstring”）.value；这就是它起作用的时候。但是，我认为我的wikipedia API有一个COR问题。在脚本调用之前是否有jQuery源代码？而不是：--“$”（“.sbutton”）。在（“单击”，function（）{your code}；”---尝试----$（“.sbutton”）。单击（function（）{your code}）；昨天我将“.wrap”从其他ajax代码中分离出来，它成功了。此外，我还将“let searchValue=document.getElementById（“#searchString”）.value；”更改为让searchValue=document.getElementById（“searchString”）但是我想我的wikipedia API有一个COR问题，你当然对getElementById中的#是正确的。在纯Javascript中，没有必要使用påthe#，因为你已经声明了你正在寻找的id。只有在使用jQuery时才需要#.这就是#所做的，声明你在寻找一个id，带点（.）你在寻找一个类。

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