Question

我是编程人员的新手！我有一些JQuery脚本创建一个弹出框。我希望在单击HTML中的图像时运行此选项。我已将脚本链接到我的html文件的顶部，文件存储在我的根目录中，我只需要告诉表格现在就读取JQuery吗？

我的JQuery：

<!DOCTYPE html>
<head>
    <title>Examples of using jQuery Alerts</title>
    <script src="jquery.js" type="text/javascript"></script>
    <script src="jquery.ui.draggable.js" type="text/javascript"></script>
    <script src="jquery.alerts.js" type="text/javascript"></script>
    <link href="jquery.alerts.css" rel="stylesheet" type="text/css"  media="screen" />

    <!-- Example script -->
    <script type="text/javascript">
    $(document).ready( function() {
        $("#basic_button").click( function() {
            jAlert('Example of a basic alert box in jquery', 'jquery basic alert  box');
        });
    });
    </script>
</head>
<body>
    <p>
        <input id="basic_button" type="button" value="Show Basic Alert" />
    </p>
</body>
</html>

我的HTML表格代码包含以下图片：

<tr> 
    <td><img alt="TE37" src="images/showroom/g25prism.jpg" title=""></td>
    <td><img alt="TE37" src="images/showroom/g25dbk.jpg" title=""></td>
    <td><img alt="TE37" src="images/showroom/g25.jpg" title=""></td>
    <td><img alt="TE37" src="images/showroom/g25premium.jpg" title=""></td>
    <td><img alt="TE37" src="images/showroom/g12.jpg" title=""></td>
</tr>

我该怎么做？谢谢:)）

Answer 1

我建议您将Javascript代码放在页面底部。

然后，请注意#basic_button是<input id="basic_button" />的引用。您需要替换表的一个引用的引用。在您的示例中，td img很好，但我建议您在表中放置一个类并使用它。

例如，它应该有效：

<!DOCTYPE html>
<head>
    <title>Examples of using jQuery Alerts</title>
    <script src="jquery.js" type="text/javascript"></script>
    <script src="jquery.ui.draggable.js" type="text/javascript"></script>
    <script src="jquery.alerts.js" type="text/javascript"></script>
    <link href="jquery.alerts.css" rel="stylesheet" type="text/css"  media="screen" />

    <!-- Example script -->
</head>
<body>
  <table class="some-class">
    <tr> 
      <td><img alt="TE37" src="images/showroom/g25prism.jpg" title=""></td>
      <td><img alt="TE37" src="images/showroom/g25dbk.jpg" title=""></td>
      <td><img alt="TE37" src="images/showroom/g25.jpg" title=""></td>
      <td><img alt="TE37" src="images/showroom/g25premium.jpg" title=""></td>
      <td><img alt="TE37" src="images/showroom/g12.jpg" title=""></td>
    </tr>
  </table>

    <script type="text/javascript">
    $(document).ready( function() {
        $(".some-class td img").click( function() {
            jAlert('Example of a basic alert box in jquery', 'jquery basic alert  box');
        });
    });
    </script>
</body>
</html>

Answer 2

将链接添加到html文件底部的jQuery。如果以正确的方式实现，页面加载速度更快，脚本和依赖项可以毫无问题地执行。

  <!-- jQuery (necessary for Bootstrap's JavaScript plug…-->
  <script src="static/js/jquery.js"></script>
  <script src="static/js/bootstrap.min.js"></script>

  </body>
</html>

Answer 3

您可以尝试下面的脚本，它应该做你想要的。我已经包含了标准警报，因为我不确定JAlert（）是什么。相反，我也包括一个常规警报（）。

为了解释脚本的作用，在页面加载 $（function（））{} 时，我们告诉页面在“Image element”上监听“click”事件。为了告诉脚本我们想要什么图像，我们添加一个名为“clickable”的任意新类（但你可以随意调用它）我们使用这个类来找到我们想要附加事件的元素。

希望这会有所帮助。

<!DOCTYPE html>
    <html>
        <head>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
            <script type="text/javascript">
                $(function() {
                    $(".clickable").on('click',function(){
                        jAlert('Example of a basic alert box in jquery', 'jquery basic alert  box'); // Don't know what JAlert is might require you to include some extra library
                        alert("I clicked on "+$(this).attr("src"));
                    });
                });
            </script>
        </head>
        <body>
            <tr>
                <td><img class="clickable" alt="TE37" src="images/showroom/g25prism.jpg" title=""></td>
                <td><img class="clickable" alt="TE37" src="images/showroom/g25dbk.jpg" title=""></td>
                <td><img class="clickable" alt="TE37" src="images/showroom/g25.jpg" title=""></td>
                <td><img class="clickable" alt="TE37" src="images/showroom/g25premium.jpg" title=""></td>
                <td><img class="clickable" alt="TE37" src="images/showroom/g12.jpg" title=""></td>
            </tr>
        </body>
    </html>

Answer 4

＆＃13;

$(document).ready( function() {
  $("td>img").on("click", function() {
    alert('Example of a basic alert box in jquery', 'jquery basic alert  box');
  });
});

＆＃13;

<!DOCTYPE html>
<head>
    <title>Examples of using jQuery Alerts</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    
</head>
<body>
    <p>
        <input id="basic_button" type="button" value="I am useless" />
    </p>
  <table>
  <tr> 
    <td><img alt="TE37" src="images/showroom/g25prism.jpg" title=""></td>
    <td><img alt="TE37" src="images/showroom/g25dbk.jpg" title=""></td>
    <td><img alt="TE37" src="images/showroom/g25.jpg" title=""></td>
    <td><img alt="TE37" src="images/showroom/g25premium.jpg" title=""></td>
    <td><img alt="TE37" src="images/showroom/g12.jpg" title=""></td>
</tr>
    </table>
</body>
</html>

＆＃13;

您必须将事件设置为不是您的按钮，而不是表格单元格或单元格中的图像

当您单击单元格包含的图像时，以下示例有效：

 $(document).ready( function() {
  $("td>img").on("click", function() {
    jAlert('Example of a basic alert box in jquery', 'jquery basic alert  box');
  });
});

如何让我的JQuery脚本在HTML中运行 - 表

4 个答案: