Question

也许现在已经很晚了，但是我很难想到这一点。

我有一个删除链接，当点击时，在OK / Cancel链接的同一位置被替换：一个淡出，另一个淡入。整个构造看起来像这样：

<div class="selfConfirm" data-props='{"idproduct": 1, "idcategory": 2}' >
    <a href="#" class="delete">Delete</a>
    <div style="display:none;">
        <a href="#" class="ok">OK</a> / <a href="#" class="cancel">Cancel</a>
    </div>
</div>

链接和单击事件是在运行时使用jquery构建的。构建链接工作正常，我可以将单击事件附加到删除链接以及确定和取消链接。

页面上可能有十几个这样的构造，我想要的是每个构造 - 以及每个碰巧在哪个父容器 - 作为一个单元。单击删除链接，相应的确定/取消淡入，并且每个都从父级获取他们正在执行的操作（在此示例中，从类别中删除产品。）

我想我的问题是：我如何将它们链接在一起，以便当我点击“删除”链接时，我在页面淡入时没有得到每个好/取消？

Answer 1

您正在寻找可以传递选择器的jQuery closest()。所以它从你click元素$(this)的给定点开始，然后上升到DOM树，直到它找到函数中传递的第一个选择器...

＆＃13;

$('.delete').on('click', function(){
    $(this).next('.hidden-buttons').toggle();
});

$('.cancel').on('click', function() {
    $(this).closest('.hidden-buttons').hide();
});


$('.ok').on('click', function() {
    console.log(
      $(this).closest('.selfConfirm').data('props')
    );
    console.log(
      'idproduct: ' + $(this).closest('.selfConfirm').data('props').idproduct
    );
    console.log(
      'idcategory: ' + $(this).closest('.selfConfirm').data('props').idcategory
    );

});

＆＃13;

.hidden-buttons {
    display:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="selfConfirm" data-props='{"idproduct": 1, "idcategory": 2}' >
    <a href="#" class="delete">Delete</a>
    <div class="hidden-buttons">
        <a href="#" class="ok">OK</a> / <a href="#" class="cancel">Cancel</a>
    </div>
</div>
<div class="selfConfirm" data-props='{"idproduct": 2, "idcategory": 2}' >
    <a href="#" class="delete">Delete</a>
    <div class="hidden-buttons">
        <a href="#" class="ok">OK</a> / <a href="#" class="cancel">Cancel</a>
    </div>
</div>
<div class="selfConfirm" data-props='{"idproduct": 3, "idcategory": 2}' >
    <a href="#" class="delete">Delete</a>
    <div class="hidden-buttons">
        <a href="#" class="ok">OK</a> / <a href="#" class="cancel">Cancel</a>
    </div>
</div>

＆＃13;

Answer 2

您可以使用jQuery中的.siblings()函数访问ok cancel div块，如下所示：

const res = {
  template: {
    "signIn":"Hello, <@#1>! Signed you in (#2)",
    ...
  },
  command: {
    "signIn": "hi",
    ...
  }
};
export default res;

$(".delete").click(function() {
   $(this).hide().siblings(".okCancelBtns").fadeIn();
});

Answer 3

对我来说，我在考虑使用.after()。我不知道为什么我会这样想但是我觉得写<a href="#" class="delete">Delete</a>然后再写$(document).ready(function(){ $('.delete').on('click' , function(){ $('.ok-cancel').remove(); $(this).after('<div class="ok-cancel">'+ '<a href="#" class="ok">OK</a> / <a href="#" class="cancel">Cancel</a>'+ '</div>'); }); $(document).on('click' , '.ok' , function(){ alert('OK'); }); $(document).on('click' , '.cancel' , function(){ $(this).parent().remove(); }); });非常简单单击代码将附加此按钮旁边的按钮。所以你的代码应该是这样的

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="selfConfirm" data-props='{"idproduct": 1, "idcategory": 2}' >
    <a href="#" class="delete">Delete</a>
</div>

<div class="selfConfirm" data-props='{"idproduct": 1, "idcategory": 2}' >
    <a href="#" class="delete">Delete</a>
</div>


<div class="selfConfirm" data-props='{"idproduct": 1, "idcategory": 2}' >
    <a href="#" class="delete">Delete</a>
</div>

$(document).ready(function(){
    $("#test").on("keypress",function(event){
        if(event.which <= 48 || event.which >=57){
            event.preventDefault();
        }
    });
    
    $("#test").on("change",function(event){
        $value = $("#test").val();
        if(isNaN($value)){
          $("#test").val('');
        }
    });
});

jquery - 将附加元素链接到其父元素：

3 个答案: