JavaScript点击字母显示文字问题

Question

我想在我的网站上放一个复活节彩蛋。如果单击“食物”一词中的字母 f，则会出现核仁巧克力饼的图片。我可以点击字母 f 并出现核仁巧克力饼，但问题是 food 这个词不是作为一个词出现的，它出现在 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 以反射(reflect) HTML 更改)

好的，正如其他回复中所述，这是因为 <div>是 block 级元素。 As explained by Mozilla (加粗以强调):

"Block-level" is categorization of HTML (Hypertext Markup Language) elements, as contrasted with "inline" elements. Block-level elements may appear only within a element. Their most significant characteristic is that they typically are formatted with a line break before and after the element (thereby creating a stand-alone block of content). That is, they take up the width of their containers.