程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 更多編程語言 >> 編程綜合問答 >> javascript-用jquery先獲取li中的內容,然後在span中輸出

javascript-用jquery先獲取li中的內容,然後在span中輸出

編輯:編程綜合問答
用jquery先獲取li中的內容,然後在span中輸出

如圖

圖片說明

我需要將每個大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);
    }

是不是很簡單呢?

u012392706
u012392706
over0609
u012392706
over0609
u012392706
u012392706
  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved