Question

我想要onclick字幕，每个字幕都有不同的galleria画廊（不是弹出式）。我在单独的html页面中有galleria画廊，现在我想在我的展示页面上做一个ajax调用，点击字幕后调出画廊。

我哪里错了？

到目前为止，这是我的php页面的代码：

    <?
$main_content .= '

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="galleria/galleria-1.2.9.min.js"></script> 

            <style>
            #galleria{ width: 700px; height: 400px; background: #000; } 
            </style>


            <script type="text/javascript">
        $(document).ready(function() {
            $("#agricultural").click(function() {
                changeProduct($(this), $(this));

$("#galleria").load("AgriculturalSlideshow.html");
            });
            $("#commercial").click(function() {
                changeProduct($(this), $(this));

$("#galleria").load("CommercialSlideshow.html");
            });
            $("#community").click(function() {
                changeProduct($(this), $(this));

$("#galleria").load("communityslideshow.html");
            });
            $("#industrial").click(function() {
                changeProduct($(this), $(this));

$("#galleria").load("industrialslideshow.html");
            });
            $("#recreational").click(function() {
                changeProduct($(this), $(this));

$("#galleria").load("recreationalslideshow.html");
            });
            $("#underconstruction").click(function() {
                changeProduct($(this), $(this));

$("#galleria").load("underconstructionslideshow.html");
            });

        function changeProduct(menu, obj){
            $(".productMenu").css({"color":"#000000"});
            $(".prodContent").hide();
            $(menu).css({"color":"#a50000"});
            $(obj).fadeIn();
        }
        });
    </script>
    <div style="padding-top:0px; padding-bottom:50px;">
        <div class="pageHeader">
            SHOWCASE
        </div>
        <div class="content">   
        <div style="padding:20px 0px 20px 0px;">
            <span class="productMenu" id="agricultural" style="cursor:pointer; padding-right:20px; color:#a50000">AGRICULTURAL</span>       
            <span class="productMenu" id="commercial" style="cursor:pointer; padding-right:20px;">COMMERCIAL</span>
            <span class="productMenu" id="community" style="cursor:pointer; padding-right:20px;">COMMUNITY</span>
            <span class="productMenu" id="industrial" style="cursor:pointer; padding-right:20px;">INDUSTRIAL</span>
            <span class="productMenu" id="recreational" style="cursor:pointer; padding-right:20px;">RECREATIONAL</span>
            <span class="productMenu" id="underconstruction" style="cursor:pointer; padding-right:20px;">UNDERCONSTRUCTION</span>             
        </div>
         <div id="galleria"> 
        </div>
        <script>
            Galleria.loadTheme("galleria/themes/classic/galleria.classic.min.js");
            Galleria.run("#galleria");
        </script>




        <div style="clear:both; text-align:justify; text-align-last:justify;padding-top:50px;">
            AGRICULTURAL | COMMERCIAL | RESIDENTIAL & GARAGES | GOVERNMENT | INDUSTRIAL | INSTITUTIONAL | RECREATIONAL
        </div>
        <div style="clear:both"></div>
    </div>';
?>

Answer 1

您必须在ajax请求中使用网址而不是文件路径，因此../AgriculturalSlideshow.html不起作用。您必须使用不包含../的网址。

带有http://的绝对网址或正确的相对网址。

jquery click event覆盖了您的onclick attribute 。因此，在jquery事件处理程序中调用changeProduct并从span元素中删除onclick属性。

changeProduct中也有分号丢失：

     function changeProduct(menu, obj){
        $(".productMenu").css({"color":"#000000"});
        $(".prodContent").hide();
        $(menu).css({"color":"#a50000"});
        $(obj).fadeIn();
    }

看看那个小提琴：http://jsfiddle.net/YqFEn/2/

我建议你使用chrome开发工具或firebug（Firefox）来调试你的javascript。这样您就可以轻松检查语法错误或ajax请求。

顺便说一下，参数menu和obj完全相同，所以某些东西不能按预期工作。但是ajax请求应该有效。

针对您的其他问题

您可以在字幕下方添加一个div框，然后将所有图库加载到此div框中。

<div id="gal_content"></div>

并调整load语句：

$("#gal_content").load("AgriculturalSlideshow.html");

ajax呼吁加勒里亚画廊

1 个答案: