Question

澄清一下：我有几组想要一次显示一组的图像。一旦用户选择了图像，我希望清除图像，并显示下一组。我使用了ImagePicker插件来选择这些图像。

以下是我的代码：

<html>
<head>
  <!-- {% block title %}{% endblock %} -->
  <title>Home</title>
  <link type="text/css" rel="stylesheet" href="{{url_for('static', filename='css_files/home.css')}}">
  <link type="text/css" rel"stylesheet" href="{{url_for('static', filename='css_files/image-picker.css')}}">
  <script type="text/javascript" src="{{url_for('static', filename='js_files/jquery-3.2.1.min.js')}}"></script>
  <!-- <script type="text/javascript" src="{{url_for('static', filename='js_files/image-picker.js')}}"></script> -->
  <script type="text/javascript" src="{{url_for('static', filename='js_files/image-picker.min.js')}}"></script>
  <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
  <script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
  <script type="text/javascript" src="{{url_for('static', filename='js_files/img_functions.js')}}"></script> 
  <script>
  $(document).ready(function(){
     $("select").imagepicker()
     getValue()
  });
  </script>
</head>

{% extends "base.html" %}
{% block home %}Yummy Mushrooms{% endblock %}
{% block content %}
<form action="/home_post" mehtod="post" class="features">
    <div class="mush-attr">

      <select class="picker">
        <option id='1' class="image" data-img-src="../static/cap_shape/bell_shaped_cap.jpeg" value="b" onClick='replaceImages();'>Bell Shape</option>
        <option id='2' class="image" data-img-src='../static/cap_shape/conical_cap.jpeg' value="c">Conical Shape</option>
        <option id='3' class="image" data-img-src="../static/cap_shape/convex_cap.jpeg" value='x'>Convex Shape</option>
        <option id='4' class="image" data-img-src="../static/cap_shape/flat_cap.jpeg" value="f">Bell Shape</option>
        <option id='5' class="image" data-img-src='../static/cap_shape/knobbed_cap.jpeg' value="k">Conical Shape</option>
        <option id='6' class="image" data-img-src="../static/cap_shape/sunken_cap.jpeg" value='s'>Convex Shape</option>
      </select>


    </div>
  <!--Submit & Agreement-->
    <div class="Submit and Agreement">
      <br>
      <button id='submit-btn' type='submit'>Submit</button>
      <br>
    </div>
  </form>
{% endblock %}
</html>

我一直在努力使用ImagePicker对象。如果有人有很多使用ImagePicker对象的经验，并且可以解释如何与它进行交互那将是很棒的。

否则，如果有人可以解释在选择一个选项时他们将如何更改所有option data-img-src。选项数量将在图像组之间保持不变。

我知道我可以按标签，类和ID选择特定元素，但我不知道如何选择和更改它们。下面是我考虑改变所有这些但不确定这对多组图像组如何工作的方式。

function replaceImages(){
    var el1 = document.getElementById("1")
    var el2 = document.getElementById("2")
    var el3 = document.getElementById("3")
    var el4 = document.getElementById("4")
    var el5 = document.getElementById("5")
    var el6 = document.getElementById("6")
    el1.data_img_src = "apple.png"
      .
      .
      .
};

更改全部选择选项图像

0 个答案: