主页 / coding / 问题 / 79177851
Accepted
bobafart
Asked: 2024-11-11 21:32:05 +0800 CST

JQuery UI 不显示工具提示（序列化顶部提示不起作用）

  • 772

我以前使用过 Jquery UI 和工具提示，没有任何问题……这次由于某种原因，我无法让它们工作。我试图让工具提示仅在鼠标悬停在 1 个元素上时显示。<head> 是：

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.14.1/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.14.1/jquery-ui.min.js"></script>
    <script>
  $("#barracks").tooltip({disabled:true});
    $(document).click(function() {
        if($("#barracks").tooltip("option", "disabled")) {
            $("#barracks").tooltip("enable");
            $("#barracks").tooltip("open");
            $("#barracks").off("mouseleave focusout");
        } else {
            $("#barracks").tooltip("close");
            $("#barracks").tooltip("disable");
        }
    });
    </script>

在 < body > 中：

                <div class="col-lg-2 col-md-2 col-xs-2 thumb"> 
                    <img src="https://www. domain .com/adminp/occur/assets/img/soldier.jpg" id="barracks" class="img-thumbnail img-fluid rounded float-start max-width: 100%;" alt="infantry" title="Infantry">
                </div>
                <div class="col-lg-2 col-md-2 col-xs-2 thumb">
                    <img src="https://www. domain .com/adminp/occur/assets/img/gunner.jpg" id="barracks" class="img-thumbnail img-fluid rounded mx-auto d-block max-width: 100%;" alt="gunner" title="Gunner">                                 
                </div>
                <div class="col-lg-2 col-md-2 col-xs-2 thumb">
                    <img src="https://www. domain .com/adminp/occur/assets/img/pilot.jpg" id="barracks" class="img-thumbnail img-fluid rounded mx-auto d-block max-width: 100%;" alt="pilot" title="Pilot">                                 
                </div>                        
                <div class="col-lg-2 col-md-2 col-xs-2 thumb">
                    <img src="https://www. domain .com/adminp/occur/assets/img/astronaut.jpg" id="barracks" class="img-thumbnail img-fluid rounded float-end max-width: 100%;" alt="astronaut" title="Astronaut">    
                </div>

步兵工具提示可用，但其他 3 个不起作用。没有显示工具提示

javascript

1 个回答

  1. Best Answer

    id当在 javascript/Jquery 中用于元素事件处理时，将其视为每个元素的唯一标识符。

    class当在 javascript/Jquery 中用于对一组元素进行事件处理时，将其视为组标识符。

    您的问题是您使用相同的方法id来处理工具提示，因此它会覆盖先前创建的工具提示。并且您只得到一个工具提示。

    转换id至class，您就可以开始了。

    工作片段：

    $(".barracks").tooltip({
  disabled: true
});
$(document).click(function() {
  if ($(".barracks").tooltip("option", "disabled")) {
    $(".barracks").tooltip("enable");
    $(".barracks").tooltip("open");
    $(".barracks").off("mouseleave focusout");
  } else {
    $(".barracks").tooltip("close");
    $(".barracks").tooltip("disable");
  }
});
    img {
  width: 100px;
  height: 100px;
  float: left;
  margin: 10px;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.14.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.14.1/jquery-ui.min.js"></script>

<div class="col-lg-2 col-md-2 col-xs-2 thumb">
  <img src="https://www.orfonline.org/public/uploads/posts/image/Indian_Army.jpg" class="barracks" class="img-thumbnail img-fluid rounded float-start max-width: 100%;" alt="infantry" title="Infantry">
</div>
<div class="col-lg-2 col-md-2 col-xs-2 thumb">
  <img src="https://media.gettyimages.com/id/50604040/photo/indian-army-machine-gunners-at-base-camp-in-shamsharbara-mts-bordering-pakistan-on-lookout-for.jpg?s=612x612&w=gi&k=20&c=1xtLbCtkQ4ak12Azk_dUbtmYdI2rJyo3iz6SNXR7W8U=" class="barracks" class="img-thumbnail img-fluid rounded mx-auto d-block max-width: 100%;" alt="gunner" title="Gunner">
</div>
<div class="col-lg-2 col-md-2 col-xs-2 thumb">
  <img src="https://swarajya.gumlet.io/swarajya/2023-01/992bc74c-0afa-4509-b8c4-148f0faf3e89/acccccc.jpeg?w=610&q=50&compress=true&format=auto" class="barracks" class="img-thumbnail img-fluid rounded mx-auto d-block max-width: 100%;" alt="pilot" title="Pilot">
</div>
<div class="col-lg-2 col-md-2 col-xs-2 thumb">
  <img src="https://www.hsfc.gov.in/UploadFiles/Astronaut/Astronaut5092985885922926595.jpg" class="barracks" class="img-thumbnail img-fluid rounded float-end max-width: 100%;" alt="astronaut" title="Astronaut">
</div>

    • 1

相关问题