Question

我正在测试我正在尝试构建的表单，并且每次从我的下拉菜单中单击不同的列表项时我都会尝试返回不同的值，我希望这很有意义，也许可以快速查看我的笔和也许会更清楚地解释https://codepen.io/alexyap/pen/GmrgVL?editors=1010

var val1 = $("#box1 p:first-child").text()
var val2 = $("#box2 p:first-child").text()

$("#box1").click(function(){
    $("#dropdown2").removeClass('appear')
    $("#dropdown1").toggleClass('appear')  
})

$("#dropdown1 ul li a").click(function(){
    $("#box1 p:first-child").text($(this).text());
    $("#box1 p:first-child").val($(this).text());
    alert(val1)
})

每次我点击占位符1,2或3时，由于某种原因他们都只返回“占位符”，我需要他们返回完整的文本，例如，如果我点击“占位符1”它应该返回“占位符1” “而不只是”占位符“

任何帮助都会受到赞赏，因为我完全被难倒了

Answer 1

您在页面加载时将val1定义为$("#box1 p:first-child").text()，然后更改#box1 p:first-child的内容 - 因此，如果您要提醒，则需要重新定义该变量使用$("#box1 p:first-child").text()的新内容。

我将val1移动到您的点击处理程序中，在您使用$.text()更改其内容之后，因为这是您引用该变量的唯一位置。

＆＃13;

$(document).ready(function() {
  var val2 = $("#box2 p:first-child").text();

  $("#box1").click(function() {
    $("#dropdown2").removeClass("appear");
    $("#dropdown1").toggleClass("appear");
  });

  $("#dropdown1 ul li a").click(function() {
    $("#box1 p:first-child").text($(this).text());
    $("#box1 p:first-child").val($(this).text());

    var val1 = $("#box1 p:first-child").text();

    alert(val1);

    // switch (val1) {
    //   case "Placeholder 1":
    //     alert("test");
    //   case "Placeholder 2":
    //   alert("test2");
    //     break;
    //   default:
    //     alert("test3");
    //   }
  });

  $("#box2").click(function() {
    $("#dropdown1").removeClass("appear");
    $("#dropdown2").toggleClass("appear");
  });

  $("#dropdown2 ul li a").click(function() {
    $("#box2 p:first-child").text($(this).text());
    $("#box2 p:first-child").val($(this).text());
  });
});

＆＃13;

* {
  margin: 0;
  padding: 0;
}

/* containers */

#wrapper {

  height: 560px;
  width: 1000px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#container {

  width: 100%;
  height: 100%;
  position: relative;
}

/* rows */

#row1, #row2, #row3 {
  background: #000;
  width: 100%;
  height: 80px;
  position: absolute;
  top: 80px;
}

#row2 {
  top: 240px;
  z-index: -1;
}

#row3 {
  top: 400px;
}



/* box containers */

.box-wrapper {
  background: blue;
  width: 80%;
  height: 100%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}




/* boxes */

#box1, #box2 {
  background: #333;
  width: 45%;
  height: 100%;
  position: absolute;
  text-align: left;
  cursor: pointer;
}

#box2 {
  right: 0;
}

#box3, #box4, #box5 {
  background: #333;
  width: 30%;
  height: 100%;
  position: absolute;
}

#box4 {
  left: 50%;
  transform: translateX(-50%);
}

#box5 {
  right: 0;
}

#box6, #box7 {
  background: #333;
  width: 45%;
  height: 100%;
  position: absolute;
  text-align: left;
  cursor: pointer;
}

#box7 {
  right: 0;
}



/* box text */

#box1 p, #box2 p, #box3 p, #box4 p, #box5 p, #box6 p, #box7 p {
  font-size: 40px;
  line-height: 80px;
  padding-left: 10px;
}



/* dropdown */

#dropdown1, #dropdown2 {
  background: #000;
  height: 150px;
  width: 100%;
  position: absolute;
  top: 80px;
  z-index: 2;
  display: none;
}

#dropdown1 ul, #dropdown2 ul {
  background: yellow;
  height: 100%;
}

#dropdown1 ul li, #dropdown2 ul li {
  list-style: none;
}

#dropdown1 ul li a, #dropdown2 ul li a {
  padding-left: 10px;
  font-size: 30px;
  text-decoration: none;
  color: #000;
}






/* show dropdown */

.appear {
  display: block !important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div id="container">
    
    <div id="row1">
      <div class="box-wrapper">
        <div id="box1">
          <p>Placeholder</p>
          <div id="dropdown1" class="dropdown">
            <ul>
              <li><a href="#">Placeholder 1</a></li>
              <li><a href="#">Placeholder 2</a></li>
              <li><a href="#">Placeholder 3</a></li>
            </ul>
          </div>
        </div>

        <div id="box2">
          <p>Placeholder</p>
          <div id="dropdown2" class="dropdown">
            <ul>
              <li><a href="#">Placeholder 1</a></li>
              <li><a href="#">Placeholder 2</a></li>
              <li><a href="#">Placeholder 3</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    
    <div id="row2">
      <div class="box-wrapper">
        <div id="box3">
          <p>Placeholder</p>
        </div>

        <div id="box4">
          <p>Placeholder</p>
        </div>
        
        <div id="box5">
          <p>Placeholder</p>
        </div>
      </div>
    </div>
    
    <div id="row3">
      <div class="box-wrapper">
        <div id="box6">
          <p>Placeholder</p>
        </div>

        <div id="box7">
          <p>Placeholder</p>
      </div>
    </div>
    </div>
  </div>
</div>

＆＃13;

Answer 2

您需要在文本值更改后重置val1。您可能还希望始终以“;

”结束行

$("#dropdown1 ul li a").click(function(){
    $("#box1 p:first-child").text($(this).text());
    $("#box1 p:first-child").val($(this).text());

    val1 = $("#box1 p:first-child").text();

    alert(val1);
});

功能警告不正确的值/文本

2 个答案: