我的 Jquery 好像没有找到 panelid

Question

所以我按照这个视频来写得更聪明，但我的代码不像他那样工作。所以我的结论是我的 jquery 似乎没有找到 panelid，我可以提醒 panelids 并且有效。我的功能是单击 "läs mer"，然后会弹出一个文本，läs mer 更改为 mindre- 。我从这里去哪里？！我很快就会发疯。

YT 视频：https://www.youtube.com/watch?v=Cc3K2jDdKTo

HTML:

<ul>
    <li> <a data-panelid="panel1" class="showhide" href="#">Läs mer +</a> </li>
    <li> <a data-panelid="panel2" class="showhide" href="#">Läs mer +</a> </li>
    <li> <a data-panelid="panel3" class="showhide" href="#">Läs mer +</a> </li>
</ul>
<div id="panel1" class="textstyle">Ett enda bett från inlandstaipanen innehåller tillräckligt mycket gift för att döda upp till 100 vuxna människor eller 250 000 möss.</div>
<div id="panel2" class="textstyle">ouahsfouashfoas aushfaslal.</div>
<div id="panel3" class="textstyle">ioajsfoiasjgoiashfoas oahsgkmaspof.</div>

Jquery:

$(document).ready(function() {
    $(".showhide").click(function() {
        var panelId = $(this).attr('data-panelid')
        alert(panelId);
        var txt = $(this).text();
        $(panelId).toggle();
        if (txt == "Läs mer +") {
            $(this).text('Mindre -');
        } else {
            $(this).text('Läs mer +');
        }
    });
});

谢谢你所做的一切:)

Answer 1

您需要使用ID Selector (“#id”)，所以添加#和panelId

$('#' + panelId)

如果您的变量值为 panel1，则 $(panelId) 将查找不存在的元素 panel1，因此它不起作用

Answer 2

使用#

$('#'+panelId)

和使用 .data() method

  var panelId =  $(this).data('panelid');

Corrected Fiddle Demo

Answer 3

这是 jsfiddle link 你可以看到它的工作。

http://jsfiddle.net/g4xd3u05/

$(document).ready(function() {
    $(".showhide").click(function() {
        var panelId = $(this).attr('data-panelid')
        var txt = $(this).text();
        $('#' + panelId).toggle(); //changed it here from just panelId
        if (txt == "Läs mer +") {
            $(this).text('Mindre -');
        } else {
            $(this).text('Läs mer +');
        }
    });
});

我的 Jquery 好像没有找到 panelid

My Jquery doesn't seem to find panelid

html

javascript

css

jquery