如何将此选项添加到此图像选取器项目中

How do I add this option to this image-picker project?

本文关键字：选取 项目 图像 添加 选项      更新时间：2023-09-26

>我有一个问题。这个概念是我有 4 个可点击的图像由这个 http://rvera.github.io/image-picker/创建，我想创建选项，在单击按钮并选择适当的图像后将某人转发到适当的 href 链接。例如，如果我点击带有猫的图像，然后点击按钮，它会将我转发到有关猫的页面。如果我点击带有狗和按钮的图像，它会将我转发到有关狗的页面，如果我单击带有狗和猫和按钮的图像，它会将我转发到有关狗和猫的页面。

<html>
<head>
<link rel="stylesheet" href="css.css">
<script src="js.js"></script>

<!-- scripts for imagepicker -->
    <link rel="stylesheet" href="image-picker.css">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="image-picker.js"></script>
    <script type="text/javascript" src="image-picker.min.js"></script>

</head>
<body>

<!--code for imagepicker-->
<select multiple="multiple" class="image-picker show-html">
  <option data-img-src="http://placekitten.com/220/200" href="http://cats.com" value="1">Cute Kitten 1</option>
  <option data-img-src="http://placekitten.com/180/200" href="http://dogs.com" value="2">Cute Kitten 2</option>
  <option data-img-src="http://placekitten.com/130/200" href="http://dogsandcats.com" value="3">Cute Kitten 3</option>
</select>
<button href="#">Forward</button>

<script>
$("select").imagepicker()
</script>
</body>

</html>

我该怎么做？我完全不知道：/。

告诉我这是否有效。我添加了一个脚本，当您更改选择时，该脚本会更改值。

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="css.css">
<script src="js.js"></script>

<!-- scripts for imagepicker -->
    <link rel="stylesheet" href="image-picker.css">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="image-picker.js"></script>
    <script type="text/javascript" src="image-picker.min.js"></script>
    <script type="text/javascript">
        "use strict";
        //wait for the page to be fully loaded
        window.onload = function() {
            initialize();
        }
    </script>

</head>
<body>

<!--code for imagepicker-->
<select multiple="multiple" class="image-picker show-html" id="selectImg">
  <option data-img-src="http://placekitten.com/220/200" value="http://cats.com">Cute Kitten 1</option>
  <option data-img-src="http://placekitten.com/180/200" value="http://dogs.com">Cute Kitten 2</option>
  <option data-img-src="http://placekitten.com/130/200" value="http://dogsandcats.com">Cute Kitten 3</option>
</select>
<button href="#" id="forwardButton">Forward</button>
<script>
function initialize() {
    var choice = document.getElementById("selectImg").value;
    //changes destination when you set or change your choice
    document.getElementById("selectImg").onchange = function() {
        choice = document.getElementById("selectImg").value;
    }
    //when button is clicked
    document.getElementById("forwardButton").onclick = function() {
        if (choice !== ("" || "undefined")) {
            window.location = choice;
        }       
    }
}
</script>
</body>
</html>
相关文章：