1
我想將我的「主」按鈕上的文本替換爲在下拉菜單中單擊的列表「項目」文本。我使用的jQuery代碼不起作用。我嘗試了其他的選擇,但他們也沒有工作。有什麼辦法可以解決這個問題嗎?對不起,煩擾如何使用jQuery替換按鈕的文本與列表項文本?
我想將我的「主」按鈕上的文本替換爲在下拉菜單中單擊的列表「項目」文本。我使用的jQuery代碼不起作用。我嘗試了其他的選擇,但他們也沒有工作。有什麼辦法可以解決這個問題嗎?對不起,煩擾如何使用jQuery替換按鈕的文本與列表項文本?
您有幾個選擇器錯誤。
更改此:
$(function(){
$(".dropdown-menu a").click(function(){
$(".dropbtn:first-child").text($(this).text());
$(".dropbtn:first-child").val($(this).text());
});
});
要這樣:
$(function() {
$(".dropdown-content a").click(function() {
$('#mainspan').text($(this).text());
$(".dropdown-content").toggle();
});
});
代碼段:
/* Main menu drops on click */
$(document).ready(function() {
$(".dropbtn").click(function() {
$(this).toggleClass('active');
$(".dropdown-content").toggle();
});
});
/* Code to replace button's text */
$(function() {
$(".dropdown-content a").click(function() {
$('#mainspan').text($(this).text());
$(".dropdown-content").toggle();
});
});
.dropdown-main {
position: relative;
display: inline-block;
}
.dropbtn {
width: 115px;
height: 28px;
border: solid 1px #cebbb1;
background-color: white;
color: #897f63;
margin-left: -5px;
position: relative;
cursor: pointer;
}
.dropbtn.active {
border: solid 1px #0093dc;
color: #0093dc;
}
#mainspan {
font-weight: bold;
position: absolute;
padding-left: 7px;
padding-top: 4px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: white;
min-width: 160px;
z-index: 1;
border: solid 1px #cebbb1;
width: 170px;
margin-left: -5px;
}
.dropdown-content a {
padding: 1px 14px;
display: block;
color: #897f63;
text-decoration: none;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
text-decoration: none;
color: #897f63;
}
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="TEXTREPLACE.css">
</head>
<body>
<div class="dropdown-main">
<div class="dropbtn">
<span id="mainspan">Main</span>
</div>
<div class="dropdown-content">
<a href="#">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>
</div>
</div>
<script type='text/javascript' src="TEXTREPLACE.js"></script>
</body>
</html>
唷,這太混亂了!非常感謝您的幫助,這個解決方案很容易解決我的問題! – confused5000