-1

我想要每个都有不同的画廊画廊的 onclick 字幕（不是弹出式风格）。我在单独的 html 页面中有画廊画廊，现在我想在我的展示页面上进行 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>';
?>
4

1 回答 1

0

您必须在 ajax 请求中使用 url 而不是文件路径，因此../AgriculturalSlideshow.html不起作用。您必须使用不带../.

绝对 urlhttp://或正确的相对 url。

而你的jquery click event 被onclick attribute. 因此changeProduct，在您的 jquery 事件处理程序中调用并从 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");
于 2013-03-27T21:31:00.623 回答