Question

我有这个脚本：

    $(".circwrapper").on("click", '.menuwrapper', function(){
        var $this = $(this);
        var text =  $this.find('.title').text();
        // alert(text);
        $('.infodisplayed').load('display.html' + '#' + text + '> *')
    })

.menuwrapper与.infodisplayed位于同一页面上。当用户点击其中一个菜单包装器时，它应该获得.menuwrapper的子文件（.title）中的文本（有效，它获取文本），这样可以用来匹配在display.html中使用div的ID名称。因为我希望匹配的div显示在.infodisplayed div中。问题是所有div都显示在.infodisplayed div中。我只想要显示与文本匹配的div。

也许你可以在我的加载功能或脚本的其他部分看到问题，让我知道一个解决方案。如果你需要jsfiddle，它将花费我10分钟。

我知道在加载函数结束时'> *'不是必需的，但这应该不是问题。我把它放在那里看看它是否会有所帮助

谢谢你们。

Jsfiddle that Shows the index page

下面是display.html页面

<div id= "Chicken">
    <!-- <h2>Chicken</h2> -->
    <h1>Chicken </h1>



</div>
<div id= "Sidedishes">
    <h1>Side dishes</h1>


</div>

<div id= "Salads">
    <h1>Salads</h1>

</div>

<div id= "Soup">
    <h1>Soups</h1>

</div>

<div id= "Fish">
    <h1>fish</h1>

</div>

<div id= "Deli">
    <h1>Deli</h1>
            <table>

        </table>
</div>

<div id= "Liver">
    <h1>liver</h1>

</div>

<div id= "Beaf">

</div>

Answer 1

加载page fragment时，路径和选择器需要在结果字符串中间隔开来：

$('.infodisplayed').load('display.html #' + text + '> *')
//                                    ^

如果没有该空格，#和text将至少部分地被视为URL fragment：

'display.html' + '#' + text + '> *'
// 'display.html#...> *'

当使用.load（）时，我从外部页面获取所有div，但我只想加载一个div

1 个答案: