Question

我有一篇包含内容的文章，我也有一个div的链接，用这个div内容打开一个fancybox，如下所示：

<p>Content of the news<a class="fancybox" href="#show">See more</a></p>

现在我想传递我的div #show，其中包含将出现在fancybox中的内容，我希望将其传递给像class = "show"这样的课程，而不是像我一样传递给id = "show"。

但是，当我尝试这个时，fancybox不会像这样打开：

<p>Content of the news<a class="fancybox" href=".show">See more</a></p>

<div class="show">

这是我的完整HTML

<article id="loop-news">

    <h2>
    Title of the News
    </h2>
    <span>Date of the news</span> 
    <p>Content of the news<a class="fancybox" href="#show">See more</a></p>


    <div id="show-container">
        <div id="show">
            <h2>Title of the news</h2>
            <span>Date of the news</span>
            <img src="images/image1.jpg"  /> <br />  
            <p>Content of the news</p>
        </div>
    </div>


</article>

我的脚本jQuery：

$(document).ready(function() {
    $(".fancybox").fancybox({
        maxWidth    : 800,
        fitToView   : false,
        width       : '80%',
        height      : '80%',
        autoSize    : false,
        closeClick  : false,    
    });
})

我的php：

while ($readNewsResult = $readNews->fetch(PDO::FETCH_ASSOC))
    echo '<article id="loop-news">';
            echo '<h2>';
            echo '<a href="#show" class="x" >'.$readNewsResult ['title'].'</a><br />';
            echo '</h2>';
            echo '<p>'.$readNewsResult ['content'].'<a class="fancybox" href="#show.'.$countitems++.'">See more</a></p>';

            echo '<div id="show-container">';
                echo '<div id="show.'.$countitems++.'">';
                    echo '<h2>'.$readNewsResult ['title'].'</h2>';
                    echo '<p>'.$readNewsResult ['content'].'</p>';
                 echo '</div>';    
             echo '</div>';
    echo '</article>';
}

如果我使用课程，你知道为什么fancybox不会打开吗？

Answer 1

如果你真的很绝望，你总是可以将class =“”属性转换为id。

它很难看，可能没用，但是如果你不能改变html并且无法破解fancybox，你可以

$(".show").first(function() {$(this).attr("id","show");});

未经测试的代码，但应该有效，将类转换为id（保留类，添加id）

然后$("#show").whateverYouWant..

更通用：

function addSameIdToClass(aClass) {
    $("."+aClass).first(function() {$(this).attr("id",aClass);});
}

addSameIdToClass("show");

这当然适用于first class =“。show”item

编辑这似乎是一个与PHP相关的问题..

我不确定拥有多个class =“show”项目是个好主意，我想fancybox的想法是为许多图像设置一个show项目，只是把它从PHP循环中删除。

如果您只有一个展示项目，则可以使用该ID，不要打扰这些类。

如果你真的需要更多，你必须在PHP循环中使用不同的ID：

$Count=0;
foreach($something as $someItem) {
    ...
    echo('<div id="show'.$Count.'">');
    ...
}

然后在循环内部，您将“show”项称为“＃show0”，“＃show1”等。：

$showId='#show'.$Count;

echo('<a ... href="'.$showId.'"');

等。

编辑2 清理一下你的PHP：

$countitems=0; // must init to avoid notices
while ($readNewsResult = $readNews->fetch(PDO::FETCH_ASSOC)) {
    $countitems++; // safer to do it here (at start or at end of loop)
    echo '<article id="loop-news'.$countitems.'" class="loop-news">';
        echo '<h2>';
            echo '<a href="#show" class="x show" >'.htmlentities($readNewsResult ['title'],ENT_COMPAT,'UTF-8').'</a><br />';
        echo '</h2>';
        echo '<p>'.htmlentities($readNewsResult ['content'],ENT_COMPAT,'UTF-8').'<a class="fancybox" href="#show.'.$countitems.'">See more</a></p>';

        echo '<div id="show-container'.$countitems.'">';
            echo '<div id="show.'.$countitems.'" class="show">';
                echo '<h2>'.htmlentities($readNewsResult ['title'],ENT_COMPAT,'UTF-8').'</h2>';
                echo '<p>'.htmlentities($readNewsResult ['content'],ENT_COMPAT,'UTF-8').'</p>';
            echo '</div>';    
        echo '</div>';
    echo '</article>';
}

顺便说一句，您应该将$ readNewsResult ['content']和其他人包含在htmlentities中

ヶ辆（$ readNewsResult [ '内容']，ENT_COMPAT， 'UTF-8'）

（如果是UTF-8）以防万一有＆lt;数据库中的char。

如果我使用＆＃34; id＆＃34;我的fancybox会打开但是，如果我使用＆＃34; class＆＃34;

1 个答案: