时间戳

首页 > 解决方案 > HTML Select item show div and post问题

javascript - HTML Select item show div and post问题

问题描述

我很困惑。我想选择两种产品。这些产品将通过单击按钮打开。将在打开的屏幕上进行选择。并且所选产品将替换单击的按钮。

我可以通过单击按钮显示产品。我什至得到了我想要的结果作为带有 jquery 的文本。但我用<select> <option>这个。不会有下拉列表，只会选择一个。所选图像将替换单击区域。我不能:(

$(document).ready(function() {
  $(".showbutton, .showbutton img").click(function(event) {
    var buttonName = $(this).closest('div').attr('id');
    var buttonNo = buttonName.slice(4);
    var boxName = "#box" + buttonNo;
    $(boxName).fadeIn(300);
  });
  $(".closebtn").click(function() {
    $(".box").fadeOut(200); 
  });
  $(".box").click(function() {
    $(".box").fadeOut(200);
  });
  $(".innerbox").click(function() {
    event.preventDefault();
    event.stopPropagation();
  });
});
div.showbutton {}

div.showbutton:hover {}

.box {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.innerbox {
  overflow: scroll;
  width: 80%;
  height: 80%;
  margin: 5% auto;
  background-color: white;
  border: 3px solid gray;
  padding: 10px;
  box-shadow: -10px -10px 25px #ccc;
}

#box1 {
  position: fixed;
  display: none;
  width: 400px;
  height: 400px;
  top: 0;
  left: 0;
}

#box2 {
  position: fixed;
  display: none;
  width: 400px;
  height: 400px;
  top: 0;
  left: 0;
}

.closebutton {
  width: 20%;
  float: right;
  cursor: pointer;
}

.closebtn {
  text-align: right;
  font-size: 20px;
  font-weight: bold;
}

.clear {
  clear: both;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="builder" action="" method="POST">
  <div class="showbutton" id="link1">
    click for first items
  </div>
  <div id="box1" class="box">
    <div class="innerbox">
      <div class="closebutton">
        <div class="closebtn">X</div>
      </div>
      - item1.png - item2.png - item3.png
    </div>
  </div>
  <div class="showbutton" id="link1">
    click for second items
  </div>
  <div id="box1" class="box">
    <div class="innerbox">
      <div class="closebutton">
        <div class="closebtn">X</div>
      </div>
      - item1.png - item2.png - item3.png
    </div>
  </div>

我的代码的 JSFIDDLE 示例：https ://jsfiddle.net/j5fqhat6/

标签： javascripthtmljqueryangularjs

解决方案

您可以将数据属性添加到您的kutudiv，这将帮助我们识别发生点击事件的位置。因此，每当您gosterButonu被点击时，您都可以使用它data-id来将选定的图像文本添加到您的gosterButonudiv。

演示代码：

$(document).ready(function() {
  $(".gosterButonu, .gosterButonu img").click(function(event) {
    var butonAdi = $(this).attr('id');
    console.log(butonAdi)
    //if on click of button you want to remove active class
    // $("div[data-id="+butonAdi+"]").find("li").removeClass("active") 
    $("div[data-id=" + butonAdi + "]").fadeIn(300);
  });
  $(".kapatButonu").click(function() {
    var data_id = $(this).closest(".kutu").data("id");
    $("#" + data_id).text($(this).closest(".icKutu").find("li.active").text())
    $(".kutu").fadeOut(200);

  });
  $(".kutu").click(function() {
    $(".kutu").fadeOut(200);
  });
  $(".icKutu").click(function() {
    event.preventDefault();
    event.stopPropagation();
  });

  //on click of li
  $(".images li").click(function() {
    //remove active class from other lis
    $(this).closest(".images").find("li").not(this).removeClass("active")
    //add active class to li which is clicked
    $(this).addClass("active");

  })
});
div.gosterButonu {}

div.gosterButonu:hover {}

.kutu {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.icKutu {
  overflow: scroll;
  width: 80%;
  height: 80%;
  margin: 5% auto;
  background-color: white;
  border: 3px solid gray;
  padding: 10px;
  box-shadow: -10px -10px 25px #ccc;
}

#kutu1 {
  position: fixed;
  display: none;
  width: 400px;
  height: 400px;
  top: 0;
  left: 0;
}

#kutu2 {
  position: fixed;
  display: none;
  width: 400px;
  height: 400px;
  top: 0;
  left: 0;
}

.kapatButonuCerceve {
  width: 20%;
  float: right;
  cursor: pointer;
}

.kapatButonu {
  text-align: right;
  font-size: 20px;
  font-weight: bold;
}

.clear {
  clear: both;
}

ul li {
  list-style-type: none
}

.active {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="builder" action="" method="POST">
  <div class="gosterButonu" id="link1">
    clickfor first items
  </div>
  <!--added data-id which matched with the div above-->
  <div id="kutu1" data-id="link1" class="kutu">
    <div class="icKutu">
      <div class="kapatButonuCerceve">
        <div class="kapatButonu">X</div>
      </div>
      <div class="clear"></div>
      <!--added ul li-->
      <ul class="images">
        <li>- item1.png</li>
        <li> - item2.png </li>
        <li>- item3.png</li>
      </ul>
    </div>
  </div>
  <div class="gosterButonu" id="link2">
    click for second items
  </div>
  <!--added data-id which matched with the div above-->
  <div id="kutu2" data-id="link2" class="kutu">
    <div class="icKutu">
      <div class="kapatButonuCerceve">
        <div class="kapatButonu">X</div>
      </div>
      <div class="clear"></div>
      <ul class="images">
        <li>- item1.png</li>
        <li> - item2.png </li>
        <li>- item3.png</li>
      </ul>
    </div>
  </div>

推荐阅读