01/10/2018, 10:20

Lấy giá trị của một thẻ li hoặc span

Mọi người cho mình hỏi mình có tạo 1 cái list gồm 3 dòng, giờ mình muốn lấy text của 1 dòng trong list khi mình click vào dòng đó thì mình phải làm sao ạ?
cảm ơn mọi người đã đọc câu hỏi

Thonalife viết 12:25 ngày 01/10/2018

Bạn có thể dùng JQuery nhé

<ul>
  <li id="li1">This is li 1</li>
  <li id="li2">This is li 2</li>
  <li id="li3">This is li 3</li>
</ul>

<script>
$("#li1").click(function(){
	alert($(this).html());
})
$("#li2").click(function(){
	alert($(this).html());
})
$("#li3").click(function(){
	alert($(this).html());
})
</script>

Demo

Update

<ul>
  <li>This is li 1</li>
  <li>This is li 2</li>
  <li>This is li 3</li>
</ul>

<script>
   $('ul').on('click', 'li', function(){
     alert($(this).html());
  });
</script>

Demo

Vô Thin viết 12:22 ngày 01/10/2018

Giả sử có:

    <ol id="the_boc_ngoai">
        <li id="dong_1">Mục thứ nhât của tui</li>
        <li id="dong_2">Mục thứ hai của tui</li>
        <li id="dong_3">Mục thứ ba của tui</li>
        <li id="dong_4">Mục thứ tư của tui</li>
    </ol>

Thì lấy text của mục 2/ bất kỳ như sau:

var bien = document.getElementById("the_boc_ngoai");

function dong_nao(e) {
   alert(e.target.innerHTML);
}

bien.addEventListener("click", dong_nao, false);

Ví dụ trên là JavaScript thuần, thô thiển, cách cũ, cổ điển. Cách mới thì đọc tài liệu ES5 hoặc ES6. Nếu dùng các thư viện như jQuery, MooTools, PrototypeJs thì đơn giản hơn, đọc tài liệu của chúng là biết.

Xong!

P/S: ví dụ trên đã được sửa cho chạy, khác với ban đầu được viết mà chưa test => không chạy.

Thuc Nguyen Tan viết 12:35 ngày 01/10/2018
  1. Không cần id tất cả các li đâu bạn
  2. chỉ cần 1 cái function thui.
$("ul li").click(){
       alert( $(this).html() );
}
Quân viết 12:26 ngày 01/10/2018

có thể dùng cách nâng cao sau nếu thẻ li được add động như sau cũng được

$('ul').on('click', 'li', function(){
    alert($(this).html());
});

cần gì tới id và lặp code vậy đâu nhỉ

Thonalife viết 12:24 ngày 01/10/2018

mình cũng chỉ là gà mờ chia sẻ thôi các bác. Cảm ơn chỉ giáo

MonMichael viết 12:28 ngày 01/10/2018

mình làm theo cách 2 của bạn nhưng nó trả về giá trị underfined nghĩa là sao vậy bạn

Vô Thin viết 12:31 ngày 01/10/2018

Cụ thể luôn nè, bạn xem ví dụ:

Nhớ là đoạn mình thích JavaScript thuần, vì mới học mà hướng dẫn jQuery thì sẽ dễ “làm hỏng” người học. Javascript bạn phải để sau thẻ HTML (tức là trước đấy nhé - không để trên phần head) không thì nó như bạn nói, xem ví dụ cụ thể bạn xem tại đây: https://jsfiddle.net/superthin/rx2ck96L/16/

MonMichael viết 12:24 ngày 01/10/2018

cảm ơn bạn… mình cũng đang học js thôi chứ chưa đụng tới jquery

Bài liên quan
0