如何在jquery中禁用重复单击_Jquery

如何在jquery中禁用重复单击

jquery

如何在jquery中禁用重复单击,jquery,Jquery,我有div1和div2，单击div1或div2的“段落”会显示在这里，再次单击“段落”会根据单击的div1或div2发出一些警报。之后，问题是如果我在div1和div2之间切换，然后再次单击“段落”，重复警报即将到来。但我不想重复警报。有人能帮我吗，下面是代码。提前谢谢 HTML $（文档）.ready（函数（）{ $（“p”）.hide（）； $（“.div1”）。在（“单击”，函数（）{ //警报（“hi”）； $（“p”）.show（）； $（“p”）。单击（函数（）{ 警报（“1区内的

我有div1和div2，单击div1或div2的“段落”会显示在这里，再次单击“段落”会根据单击的div1或div2发出一些警报。之后，问题是如果我在div1和div2之间切换，然后再次单击“段落”，重复警报即将到来。但我不想重复警报。有人能帮我吗，下面是代码。提前谢谢

HTML


$（文档）.ready（函数（）{
$（“p”）.hide（）；
$（“.div1”）。在（“单击”，函数（）{
//警报（“hi”）；
$（“p”）.show（）；
$（“p”）。单击（函数（）{
警报（“1区内的p”）；
});
});
$（“.div2”）。在（“单击”，函数（）{
$（“p”）.show（）；
$（“p”）。单击（函数（）{
警觉（“第2分部内的p”）；
});
});
});
div2必须正确设置事件处理程序
我理解你的目标。。。单击div1
和div2
只能更改“参考”。应在p
单击时发出警报
就这样写吧

$（文档）.ready（函数（）{
$（“p”）.hide（）；
var alertText；//用作“引用”的变量。
$（“.div1”）.one（“单击”，函数（）{
$（“p”）.show（）；
alertText=“单击第一个分区”；
});
$（“.div2”）.one（“单击”，函数（）{
$（“p”）.show（）；
alertText=“单击第二个分区”；
});
$（“p”）。在（“单击”，函数（）{
如果（alertText！=“”）{
警报（警报文本）；
}
alertText=“”；
});
});

段落
简单的方法是在导航项目上切换选定的类别，并在单击段落时查找该类别

$（'.nav项'）。单击（函数（）{
$（'.para'）.show（）；
$（'.nav item.selected'）.removeClass（'selected'））
$（this）.addClass（'已选定'）
})
$（'.para'）。单击（函数（）{
所选变量=$（'.nav-item.selected a'）.text（）
console.log（'selected is'，selected）
})
p.para{display:none}
.选择了一个{color:red}

段落

$（文档）.ready（函数（）{
var-div；
$（“p”）.hide（）；
$（“.div1”）。在（“单击”，函数（）{
$（“p”）.show（）；
div=‘div 1’；
});
$（“.div2”）。在（“单击”，函数（）{
$（“p”）.show（）；
div=‘div 2’；
});
$（“p”）。单击（函数（）{
警报（“p内”+分区）；
});
});

段落

段落
我认为在这种情况下调用ajax可能是正确的
HTML

$（文档）.ready（函数（）{
$（“p”）.hide（）；
var ajaxuri；//用作“引用”的变量。
$（“.div1”）。在（“单击”，函数（）{
$（“p”）.show（）；
ajaxuri=0；
});
$（“.div2”）。在（“单击”，函数（）{
$（“p”）.show（）；
ajaxuri=1；
});
$（“p”）。在（“单击”，函数（）{
警报（ajaxuri）；
$.ajax({
键入：“获取”，
url:“http://localhost/bootstrap/onclick/response.json?id=“+ajaxuri，
成功：功能（结果）{
$（“#name1”）.text（result.critical[0].name）；
$（“#value1”）.text（result.critical[0].value）；
$（“#名称2”）.text（result.major[0].name）；
$（“#value2”）.text（result.major[0].value）；
$（“#name3”）.text（result.minor[0].name）；
$（“#value3”）.text（result.minor[0].value）；
}
});
});
});
段落
谢谢您的回答。但我的目标是禁用重复单击。这里的警报可以是任何类似的内容，而不是“div1中的p”，可能是“第一次单击”，而不是“div2中的p”，可能是“第二次单击”…我在我的项目中有相同的场景，需要基于Clicks调用ajax/api，所以您只需要为每个div
单击一次？是的，但是当我切换到其他div并单击段落时，它应该会再次提醒文本。好的。。。因此，在div
上单击，设置一个文本。在p上单击，仅当设置了文本时发出警报。；）我编辑了我的答案。我刚刚看到了你作为答案发布的Ajax场景。。。上面的编辑也适用于它。；）谢谢你的回答。但我的目标是禁用重复点击。在这里，警报可以是任何类似的内容，而不是“p inside div1”，可能是“first one clicked”，而不是“p inside div2”，可能是“second one clicked”。。我在我的项目中有相同的场景，需要基于单击调用ajax/api
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
 $("p").hide();

     $(".div1").on("click",function(){
    // alert('hi');
     $("p").show();
         $("p").click(function(){
        alert("p inside div1");
    });
    });
     $(".div2").on("click",function(){
      $("p").show();
        $("p").click(function(){
        alert("p inside div2");
    });
    });
});
</script>
</head>
<body>
<div class="div1"><a href="#">div1</a></div>
<div class="div2"><a href="#">div2</a</div>
<p class="para">paragraph</p>

</body>
</html>



    $(document).ready(function() {
      var div;
      var count = 0;
      $("p").hide();
      $(".div1").on("click", function() {
        $("p").show();
        div = 'div 1';
        count = 0;
      });

      $(".div2").on("click", function() {
        $("p").show();
        div = 'div 2';
        count = 0;
      });

      $("p").click(function() {
        if( count === 0 ){
            alert("p inside " + div);
        }
        count++;
      });
    });
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("p").hide();

  var ajaxuri;  // A variable to use as a "reference".

  $(".div1").on("click",function(){
    $("p").show();
    ajaxuri=0;

  });

  $(".div2").on("click",function(){
    $("p").show();
    ajaxuri=1;

  });

  $("p").on("click",function(){
  alert(ajaxuri);
    $.ajax({
        type: "GET",
        url: "http://localhost/bootstrap/onclick/response.json?id="+ajaxuri,
        success: function(result) {
            $("#name1").text(result.critical[0].name);
            $("#value1").text(result.critical[0].value);

            $("#name2").text(result.major[0].name);
            $("#value2").text(result.major[0].value);

            $("#name3").text(result.minor[0].name);
            $("#value3").text(result.minor[0].value);
        }
    });
  });

});
</script>
</head>
<body>
<div class="div1"><a href="#">div1</a></div>
<div class="div2"><a href="#">div2</a></div>
<p class="para">paragraph</p>

</body>
</html>