如圖
我需要將每個大li標簽裡面選擇好的li裡面內容顯示到上面span標簽裡面,點擊選擇了的li裡面會加個class="selected",這個要用jquery來實現嗎?要怎麼寫呢?本人js有點薄弱,希望能詳細些
樓主,你好,針對你的問題,想要實現其實也十分簡單,我用你的問題截圖,舉一個簡單的例子,裡面有詳細的注釋,你先看,如果不懂的可以問我。下面這個是個簡單的實現,還可以擴展功能,使他們適用於更多的地方。在下面的例子中,我在對應的ul和span上面都加了一個id屬性,為的是能夠更快的找到對應的元素。當然,根據文檔的結構,也可以不設置元素id,但是需要通過結果查找出來,相對來講,設置了屬性的元素更容易理解一些。
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
.selected {
background-color: #ccc;
}
</style>
</head>
<body>
<span id="checkedPJLi"></span>
<ul id="pj_items">
<li val="djhj">定價黃金</li>
<li val="jjhj">計價黃金</li>
</ul>
</body>
<script type="text/javascript">
$(function(){
//首先,我們在元素加載完成以後,初始化pj_items下每個li對應的單擊事件,也就是選中事件
$("#pj_items li").bind("click", function(){
selectedItem(this);
});
});
//選中某個li響應的方法
function selectedItem(obj){
//獲取當前發生單擊事件的元素對象
var $elemThis = $(obj);
//現在我們向元素裡添加名為selected的class樣式
$elemThis.addClass("selected");
//由於是單選,所以我們需要將之前之前選中的li重置回去,即取消當前選中的樣式selected
$elemThis.siblings().removeClass("selected");
//方法一、最後我們需要將當前選中的值放到我們需要的span上面去,也就是調用tackSelectedItem方法
//tackSelectedItem();
//方法二、當然,tackSelectedItem方法提供的是一種從全局查找選中元素的方法,還可以省略為下面的步驟,因為我們操作的當前元素就是我們想要的選項,我們可以直接取值並賦給對應的span元素
//也就是,先取得當前選中元素對應的文本內容
var txt_this = $elemThis.text();
$("#checkedPJLi").text(txt_this);
}
//從全局pj_items的ul查找選中li元素並將其文本內容賦值給checkedPJLi的span
function tackSelectedItem(){
//首先獲取id="items"的ul下選中的li元素對象
var $selectedLi = $("#pj_items").find(".selected");
//然後通過這個元素對象,可以獲取想要從它身上獲取的它所擁有的一切,如:文本值
var txt_item = $selectedLi.text();
//又如屬性值(當然,樓主並未提到,就作為擴展吧)
//var val_item = $selectedLi.attr("val");
//接下來樓主說的將值綁定到對應的span上了
$("#checkedPJLi").text(txt_item);
}
</script>
</html>
上面給span復制的方法一和方法二,二選其一即可,如果選了方法二,就可以不用tackSelectedItem方法,即可以刪除。這裡寫出來,只是為了你可以更好的擴展提供一下思路。比如今後,你可以通過傳遞ul的id屬性和需要綁定的li的id屬性,通過一個方法就可以使用於頁面上需要相同功能的位置。比如說擴展後的方法為:
/*ul_id:需要綁定選中並將值賦予span的ul的id屬性值;span_id:與之對應的span元素的id屬性值;selected_class:這組功能你所對應想要綁定的選中狀態的樣式名稱(主要針對你可能需要不同的樣式的情況,如果不需要刻意不傳或默認一個就可以了)*/
function tackSelectedItem(ul_id, span_id, selected_class){
//首先獲取id="items"的ul下選中的li元素對象
var $selectedLi = $("#"+ul_id).find("."+selected_class);
//然後通過這個元素對象,可以獲取想要從它身上獲取的它所擁有的一切,如:文本值
var txt_item = $selectedLi.text();
//接下來樓主說的將值綁定到對應的span上了
$("#"+span_id).text(txt_item);
}
是不是很簡單呢?