功能提示错误的值/文本

Question

i am testing out a form i am trying to build and i am trying to return different values each time i click a different list item from my dropdown menu, i hope that makes sense, maybe take a quick peek at my pen and perhaps it will be explained clearer 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)
})

each time i click either Placeholder 1, 2 or 3 they all return just "Placeholder" for some reason, i need them to return their complete text, for example if i click on "Placeholder 1" it should return "Placeholder 1" and not just "Placeholder"

any help is appreciated as i am completely stumped

Answer 1

You're defining val1 as $("#box1 p:first-child").text() when the page loads, then changing the contents of #box1 p:first-child - so you need to re-define that variable if you want to alert with the new contents of $("#box1 p:first-child").text() .

I moved val1 into your click handler, after you change it's contents with $.text() since that's the only place you reference that variable.

 $(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()); }); }); 

 * { 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; } 

 <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> 

Answer 2

You need to reset val1 after the text value has changed. You might also want to consistently end you lines with ;

$("#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);
});