Question

我在这里做什么错了？

所以我基本上想从交换按钮返回2个父母，这是主要的div，其中包含两个特定的div，它们具有要交换的某些类“ imagentextimage”和“ imagentexttext”。

还有一种更好的方法，只是说“交换”而不是必须先检查一个元素在另一个元素之前还是之后，然后再根据该元素进行交换？因为我只想来回交换。

我的html是这个

<div class="smallbox-wrapper imagentextboxicon" id="row1">
<div class="widewrapper">
    <input type="button" class="swapbutton" value="⇔">
    <input type="button" class="deletebutton " value="X" onclick="delete_row('row2')">
</div>

<div class="smallbox imagentextimage">
    <div class="smallbox twoxboximage" contenteditable="true" placeholder="image.."></div>
</div>

<div class="smallbox imagentexttext">
    <div class="smallbox twoxboximage" contenteditable="true" placeholder="Optional Image.."></div>
    <div id="title" class="smallbox twoxboxheader" contenteditable="true" placeholder="Optional Header.."></div>
    <div class="smallbox twoxboxtext" contenteditable="true" placeholder="Text.."></div>
</div>

<div class="up"></div>
<div class="down"></div>
</div>

我有这个Js，如果我单击交换按钮会触发

//Swap button (for image & text)
$(document).on('click', ".swapbutton", function() {
    $(this).parent().parent(".imagentexttext").before($(this).parent().parent(".imagentextimage"));
});

该按钮确实与alert（）一起使用；但是在这里我没有任何错误，也不知道我在做什么错。

有人可以向我解释为什么这行不通吗。

非常感谢。爱克

Answer 1

您可以使用closest在按钮的父项的父项中找到图像和文本，然后检查图像和文本的索引，以确定是在文本之前还是之后添加图像。

请参见下面的代码

$(document).ready(function(){
  $('.swapbutton').click(function(){
    var $parent = $(this).closest('div.smallbox-wrapper');
    var $text = $parent.find('.imagentexttext');
    var textIndex = $text.index();
    var $img = $parent.find('.imagentextimage');
    var imgIndex = $img.index();
    if(textIndex > imgIndex) {
        $img.before($text);
    } else {
      $img.after($text);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="smallbox-wrapper imagentextboxicon" id="row1">
<div class="widewrapper">
    <input type="button" class="swapbutton" value="⇔">
    <input type="button" class="deletebutton " value="X" onclick="delete_row('row2')">
</div>

<div class="smallbox imagentextimage">
    <div class="smallbox twoxboximage" contenteditable="true" placeholder="image..">img</div>
</div>

<div class="smallbox imagentexttext">
    <div class="smallbox twoxboximage" contenteditable="true" placeholder="Optional Image..">Text</div>
    <div id="title" class="smallbox twoxboxheader" contenteditable="true" placeholder="Optional Header..">test</div>
    <div class="smallbox twoxboxtext" contenteditable="true" placeholder="Text..">text</div>
</div>

<div class="up"></div>
<div class="down"></div>
</div>

Answer 2

您可以通过以下方式进行：

$(document).ready(function(){
    var flag_on = 1;
    $(document).on('click', ".swapbutton", function() {
        if(flag_on == 1){
            $(".imagentexttext").hide();
            $(".imagentextimage").show();
        }else{
            $(".imagentextimage").hide();
            $(".imagentexttext").show();
        }

    });
});

在jQuery中交换parent.parent的两个孩子不起作用

2 个答案: