Question

我试图创建一个网站以显示6张图片，并且用户可以标记每张图片他喜欢。就像您在Netflix或Google的验证码上注册时一样。

我对Web开发非常陌生，所以我不知道什么是最好的方法。我使用Bootstrap创建了网站，但是现在我很难实现使图像可检查的代码。

我找到了一个非常有趣的插件，但是没有用。但是我不确定我是否正确实现了插件。链接：http://jcuenod.github.io/imgCheckbox/

如果我复制代码，则图像会显示在页面上，但我无法单击它们。

下面的代码不是我的完整网站，只是一小页用于测试。

<head>
  <script type="text/javascript" src='imgCheckbox/jquery.imgcheckbox.js'>

<body>
<!-- Main -->
<main role="main" class="container-fluid">

  <div class="container-fluid" style="margin-top:50px;">
    <section id="basicusage" class="wrapper special">
      <header class="major">
        <h2>Basic Usage</h2>
      </header>
      <form class="exampleone">
        <p>
          <img src="images/1.jpg" class="img-fluid" alt="">
          <span class="spacer"></span>
          <img src="images/2.jpg" class="img-fluid" alt="">
          <span class="spacer"></span>
          <img src="images/3.jpg" class="img-fluid" alt="">
        </p>
        <input type="submit" />
      </form>
    </section>
  </div>

</main>

<!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
    integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
    integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
    crossorigin="anonymous"></script>
</body>

Answer 1

由于jquery.imgcheckbox是 jquery 插件，因此您需要包含jquery。例如，这是通过链接到https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js来完成的。 jQuery和插件成功加载后，您可以使用 $（“ img”）。imgCheckbox（）;

将复选框添加到任何图像

这是一个可行的示例：

$(document).ready(function() {
  $("img").imgCheckbox();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://jcuenod.github.io/imgCheckbox/assets/js/jquery.imgcheckbox.js"></script>
<div class="container-fluid" style="margin-top:50px;">
  <section id="basicusage" class="wrapper special">
    <header class="major">
      <h2>Basic Usage</h2>
    </header>
    <form class="exampleone">
      <p>
        <img src="https://picsum.photos/200/300" class="img-fluid" alt="">
        <span class="spacer"></span>
        <img src="https://picsum.photos/200/300" class="img-fluid" alt="">
        <span class="spacer"></span>
        <img src="https://picsum.photos/200/300" class="img-fluid" alt="">
      </p>
      <input type="submit" />
    </form>
  </section>
</div>

请注意，以上内容仅适用于此。复制和粘贴无效。如果您希望将某些内容另存为.html文件，请执行以下操作：

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://jcuenod.github.io/imgCheckbox/assets/js/jquery.imgcheckbox.js"></script>
<script type="text/javascript"> 
$( document ).ready(function()
{
   $("img").imgCheckbox();
});
</script>
</head> 
  <div class="container-fluid" style="margin-top:50px;">
    <section id="basicusage" class="wrapper special">
      <header class="major">
        <h2>Basic Usage</h2>
      </header>
      <form class="exampleone">
        <p>
          <img src="https://picsum.photos/200/300" class="img-fluid" alt="">
          <span class="spacer"></span>
          <img src="https://picsum.photos/200/300" class="img-fluid" alt="">
          <span class="spacer"></span>
          <img src="https://picsum.photos/200/300" class="img-fluid" alt="">
        </p>
        <input type="submit" />
      </form>
    </section>
  </div>
</html>

图片选择器HTML

1 个答案: