Question

我想在我的网站上找到一些复活节彩蛋。如果单击食物一词中的字母f，则会出现布朗尼蛋糕图片。我可以点击字母f，然后出现布朗尼蛋糕，但问题是食物这个词不会出现在f和ood之间出现的单词。

我有一个JSfiddle来演示：http://jsfiddle.net/od88txko/

我的代码：

$( document ).ready(function() {
    $('.f').on('click', function () {
        $('div', this).text(function (text) {
            return text === 'f' ? 'f' : 'f';
        }).parent().next().toggle();
    }); 
});

Answer 1

将您的HTML更改为：

<span class="f">f</span>ood

JS Fiddle Demo （我还编辑了您的JS以反映HTML更改）

好，所以在其他回复中指出，因为<div>是块级元素。 As explained by Mozilla（强调添加了粗体）：

＆＃34;块级别＆＃34;是HTML（超文本标记语言）元素的分类，与＆＃34; inline＆＃34;元素。块级元素可能仅出现在元素中。它们最重要的特征是它们通常在元素之前和之后用换行格式化（从而创建独立的内容块）。也就是说，它们占据了容器的宽度。

Answer 2

那是因为您正在使用div，这是一个块元素。您需要inline元素，例如span

Answer 3

那是因为DIV是一个块级元素。尝试使用SPAN

JavaScript点击字母显示文本问题

3 个答案: