Question

关于这个website我试图在点击时隐藏一些元素。

正如你所看到的，左边有一些物体，我可以在右边拖放它们，点击它们就可以隐藏＆＃34;。

如果我将相同的元素放置2次，则会发生隐藏。我只需要点击隐藏所选元素。

这就是我试过的JS：

 $(document).ready(function(){
//Counter
counter = 0;
//Make element draggable
$(".drag").draggable({
    helper:'clone',
    containment: 'frame',

    //When first dragged
    stop:function(ev, ui) {
        var pos=$(ui.helper).offset();
        objName = "#clonediv"+counter
        $(objName).css({"left":pos.left,"top":pos.top});
        $(objName).removeClass("drag");


        //When an existiung object is dragged
        $(objName).draggable({
            containment: 'parent',
            stop:function(ev, ui) {
                var pos=$(ui.helper).offset();
                console.log($(this).attr("id"));
                              console.log(pos.left)
                console.log(pos.top)
            }
        });
    }
});
//Make element droppable
$("#frame").droppable({
    drop: function(ev, ui) {
        if (ui.helper.attr('id').search(/drag[0-9]/) != -1){
            counter++;
            var element=$(ui.draggable).clone();
            element.addClass("tempclass");
            $(this).append(element);
            $(".tempclass").attr("id","clonediv"+counter);
            $("#clonediv"+counter).removeClass("tempclass");

            //Get the dynamically item id
            draggedNumber = ui.helper.attr('id').search(/drag([0-9])/)
            itemDragged = "dragged" + RegExp.$1
            console.log(itemDragged)

            $("#clonediv"+counter).addClass(itemDragged);
        }
$(".drag").draggable({
  revert: 'invalid'
});
$(".dragged1").addClass("deleted-1");
$(".deleted-1").click(function(){
  $(".dragged1").hide();
});
$(".dragged2").addClass("deleted-2");
$(".deleted-2").click(function(){
  $(".dragged2").hide();
});
$(".dragged3").addClass("deleted-3");
$(".deleted-3").click(function(){
  $(".dragged3").hide();
});
$(".dragged4").addClass("deleted-4");
$(".deleted-4").click(function(){
  $(".dragged4").hide();
});
$(".dragged5").addClass("deleted-5");
$(".deleted-5").click(function(){
  $(".dragged5").hide();
});
$(".dragged6").addClass("deleted-6");
$(".deleted-6").click(function(){
  $(".dragged6").hide();
});
$(".dragged7").addClass("deleted-7");
$(".deleted-7").click(function(){
  $(".dragged7").hide();
});
$(".dragged8").addClass("deleted-8");
$(".deleted-8").click(function(){
  $(".dragged8").hide();
});
    }
});
});

我的HTML：

<div id="wrapper">
    <div id="options">
        <div id="drag1" class="drag"></div> <!-- end of drag1 -->
      <div id="rotate_btn_1" class="rotate"></div>
        <div id="drag2" class="drag"></div> <!-- end of drag2 -->
      <div id="rotate_btn_2" class="rotate"></div>
        <div id="drag3" class="drag"></div> <!-- end of drag3 -->
      <div id="rotate_btn_3" class="rotate"></div>
        <div id="drag4" class="drag"></div> <!-- end of drag4 -->
      <div id="rotate_btn_4" class="rotate"></div>
        <div id="drag5" class="drag"></div> <!-- end of drag5 -->
      <div id="rotate_btn_5" class="rotate"></div>
        <div id="drag6" class="drag"></div> <!-- end of drag6 -->
      <div id="rotate_btn_6" class="rotate"></div>
    <div id="drag7" class="drag"></div> <!-- end of drag7 -->
      <div id="rotate_btn_7" class="rotate"></div>
    <div id="drag8" class="drag"></div> <!-- end of drag8 -->
      <div id="rotate_btn_8" class="rotate"></div>
    </div><!-- end of options -->
    <div id="frame">
    <input id="undo" type="button">
    </div><!-- end of frame -->
</div><!-- end of wrapper -->

我怎样才能隐藏一个div？

Answer 1

使用时

void foo(int id)        //id is the thread ID
{
    /* Acquire shared mutex ... */
    AcquireReadLock(g_mutex);   // calls AcquireSRWLockShared on windows
    AtomicDecrement(&g_TotalNumberOfThreads); // calls InterLockedDecrement()
    while (g_TotalNumberOfThreads != 0)
        ;   //spin
    ReleaseReadLock(g_mutex);
}

将隐藏所有$(".deleted-4").click(function(){ $(".dragged4").hide(); });。

我在代码中看到一个div同时包含.dragged4和.deleted-x类：

.draggedx

所以这应该有效：

<div id="clonediv1" class="ui-draggable dragged3 deleted-3" style="left: 1050.5px; top: 153px;"></div>

请注意，该元素将被隐藏，而不是删除！
如果要从DOM中删除该项，请使用

$(".deleted-4").click(function(){
  $(this).hide();
});

让所有项目动态化：

$(".deleted-4").click(function(){
  $(this).remove();
});

jQuery：点击隐藏特定div

1 个答案: