Question

我有一个名为Groupz的div和另一个名为vegasDetailz

的div

现在我想，当我点击位于第一个div中的按钮时，第一个div应该消失，第二个div应该为此目的占据它的位置我写了下面的jquery代码

＆＃13;

$(document).ready(function() {
  $("button").click(function() {
    $("#vegasDetailz").replaceWith("#Groupz");
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="vegasDetailz">
  <input class="submitBTN getstart" name="button" type="submit" value="Get Started">
</div>
<div id="Groupz"></div>

＆＃13;

但它不适合我。有任何想法吗？

注意：我使用的是php laravel 5.3

Answer 1

您尝试点击$("button")但没有button，因此请使用$(".getstart")，因为它是您输入的ID。

第二个你的.replaceWith("#Groupz")只是在div中尝试文本，你必须首先获得元素才能替换整个元素。与.replaceWith($("#Groupz"))

一样

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div  id="vegasDetailz">

 <input class="submitBTN getstart" name="button" type="submit" value="Get Started">
 </div>

  <div id="Groupz">
  </div>
 <script>
 $(document).ready(function() {
 $(".getstart").click(function(){
        $("#vegasDetailz").replaceWith($("#Groupz").html("Im an replaced"));
    });
  });
 </script>

＆＃13;

Answer 2

如果您想使用类作为选择器，则需要使用名称作为选择器，然后像input[name=button]一样使用，然后使用.submitBTN。

＆＃13;

$(document).ready(function() {
  $("#Groupz").hide();
  $(".submitBTN").click(function() { // you can also use input[name=button] for '.submitBTN'
    $("#vegasDetailz").hide();
    $("#Groupz").show();
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="vegasDetailz">

  <input class="submitBTN getstart" name="button" type="submit" value="Get Started">
</div>
<div id="Groupz">
  Hai Another div
</div>

＆＃13;

Answer 3

如果你只想展示＆amp;隐藏按钮单击上的div，然后尝试以下代码：

<div  id="vegasDetailz">
     <input class="submitBTN getstart" name="button" type="submit" value="Get Started">
 </div>
 <div id="Groupz" style="display:none;">Hello</div>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <script>
 $(document).ready(function() {
 $(".getstart").click(function(){
        $("#vegasDetailz").css('display','none');
        $("#Groupz").css('display','block');
    });
  });
 </script>

如果您不想在默认状态下显示第二个div，请默认隐藏名为div的{{1}} ID。

我希望，这对你有帮助。

Answer 4

您可以从div submitBTN getstart中删除vegasDetailz，然后将新的Groupz添加到第二个div $(document).ready(function() { $(".getstart").click(function(){ $(".getstart").remove(); $("#Groupz").append($("<input class='getstart' name='button' type='submit' value='Get Started'>")); }); });：

＆＃13;

#vegasDetailz {
  background-color: grey;
  width:500px;
  height:60px;
}
#Groupz {
  width:500px;
  background-color:pink;
  height:60px;
  margin-top:5px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div  id="vegasDetailz">
  <input class="getstart" name="button" type="submit" value="Get Started">
</div>
    
<div id="Groupz">
</div>

＆＃13;

public class SingleItemView extends AppCompatActivity implements View.OnClickListener

＆＃13;

使用jQuery将Div内容替换为另一个

4 个答案: