Question

我正在开发一个网站，用于解析rss提要并根据类别显示它们。您可以在此处查看：http://vitaminjdesign.com/adrian

我使用标签显示每个类别。选项卡使用ajax在单击时显示一组新的Feed。

我还使用了另外两个脚本 - 一个名为equalheights的脚本，它将所有高度重新调整为最高项目的高度。我使用的另一个脚本名为smart columns，它基本上调整了列的大小，因此它总是填满屏幕。

我遇到的第一个问题是当您点击新标签页（显示该类别中的Feed）时。单击新选项卡时，控制台会显示jQuery错误：

$(".block").equalHeights is not a function
[Break On This Error] $(".block").equalHeights();

主要问题是，即使该类别中有多个Feed框，每个Feed框也会填满整个屏幕的宽度（点击标签后）。

MY GUESS - 尽管在页面加载时加载了所有标签（所有标签页），但是当选择新标签页时，两个jQuery脚本都需要再次运行。关于如何使这项工作正常的任何想法？

有一点需要注意 - 我使用ajaxSuccess方法在第一页上使equalHeights工作......但是在点击标签后它不会工作。

我的选项卡的jQuery代码如下：

$(".tab_content").hide(); //Hide all content
        $("ul.tabs li:first").addClass("active").show(); //Activate first tab
        $(".tab_content:first").show(); //Show first tab content

        $("#cities li:nth-child(1)").addClass('zebra');
        $("#column li ul li:nth-child(6)").addClass('zebra1');


        //On Click Event
        $("ul.tabs li").click(function() {

            $("ul.tabs li").removeClass("active"); //Remove any "active" class
            $(this).addClass("active"); //Add "active" class to selected tab
            $(".tab_content").hide(); //Hide all tab content

            var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
            $(activeTab).fadeIn(); //Fade in the active ID content
            $(".block").equalHeights();
            return false;
        });

感谢Macy（请参阅下面的回答），我将我的jQuery脚本带到了以下内容:(仍然无效）

$(document).ajaxSuccess(function(){
        var script = document.createElement('script');
        script.src = 'js/equalHeight.js';
        document.body.appendChild(script);
        equalHeight($(".block"));

Answer 1

我在你的代码中发现了一些小问题。我不确定我的建议会解决所有问题，但我决定在这里描述我的第一批结果。

1）你应该在'}'之前删除逗号。目前，通话看起来像$("#column").sortable({/**/,});

2）函数equalHeight不是jQuery插件。这就是为什么“click”事件处理程序中的调用$(".block").equalHeights();跟随错误“$（”。block“）的原因.inalHeights不是你所描述的函数。您应该将代码的位置更改为equalHeight($(".block"));，就像在其他地方使用它一样。

3）脚本http://vitaminjdesign.com/adrian/js/equalHeight.js仅定义函数equalHeight，不启动任何操作。一旦加载它就留在页面上。因此，不应在每个ajax请求结束时加载。所以我建议减少脚本

$(document).ajaxSuccess(function(){
    var script = document.createElement('script');
    script.src = 'http://vitaminjdesign.com/adrian/js/equalHeight.js';
    document.body.appendChild(script);
    equalHeight($(".block"));

    $("a[href^='http:']:not([href*='" + window.location.host + "'])").each(function() {               
        $(this).attr("target", "_blank");
    });
});

到

$(document).ajaxSuccess(function(){
    equalHeight($(".block"));

    $("a[href^='http:']:not([href*='" + window.location.host + "'])").each(function() {               
        $(this).attr("target", "_blank");
    });
});

4）我建议从

更改http://vitaminjdesign.com/adrian/js/equalHeight.js的代码

function equalHeight(group) {
   tallest = 0;
   group.each(function() {
      thisHeight = $(this).height();
      if(thisHeight > tallest) {
         tallest = thisHeight;
      }
   });
   group.height(tallest);
}

到

function equalHeight(group) {
   var tallest = 0;
   group.each(function() {
      var thisHeight = $(this).height();
      if(thisHeight > tallest) {
         tallest = thisHeight;
      }
   });
   group.height(tallest);
}

消除全局变量tallest和thisHeight的使用。我建议您使用JSLint来验证所有JavaScript代码。我发现它非常有用。

5）我建议您使用任何XHTML验证器在标记中查找一些小但有时非常重要的错误。例如，请尝试this查看一些错误。您遵循XHTML标准的次数越多，在不同的Web浏览器中获得相同结果的概率就越大。顺便说一句，如果页面中包含的脚本将采用以下形式，您可以大大减少当前代码中的错误数量

<script type="text/javascript">
//<![CDATA[
/* here is the JavaScript code */
//]]>
</script>

我没有分析完整的代码，但我希望我的建议至少可以解决您在问题中描述的一些问题。

Answer 2

实际上，当您向文档添加新元素时，等高度脚本尚未将其行为附加到该新元素。因此，“快速修复”可能是在ajax请求完成后重新嵌入equheights脚本，以便它重新附加到页面上的所有元素，包括刚刚添加的元素。

在此之前：$（“。block”）。equalHeights（）; ，添加一行脚本，重新嵌入/重新运行您的同等高度脚本。

$.getScript('<the location of your equalHeightsScript>'); 
$.getScript('<the location of your smartColumnsScript>');
$(".block").equalHeights();

或

var script = document.createElement('script');
script.src = '<the location of your script>';
document.body.appendChild(script);

更好的解决方案是升级插件，以便利用直播。但是，我现在还不能做到这一点：）

Answer 3

这里有些错误

$("ul.tabs li").click(function() {
            $("ul.tabs li").removeClass("active"); //Remove any "active" class
            $(this).addClass("active"); //Add "active" class to selected tab
            $(".tab_content").hide(); //Hide all tab content
            .
            .
            .
        });

应该像这样重写

$("ul.tabs li").click(function() {
            $(this).addClass("active").Siblings("li").removeClass("active");; //Remove any "active" class Add "active" class to selected tab
            $(".tab_content").hide(); //Hide all tab content
            .
            .
            .
        });

Answer 4

我认为你不需要在ajax之后再次运行脚本，或者至少那不是“主要”问题。

您似乎在脚本 smartColumn.js

中遇到了一些问题

现在似乎只对名为“column”（'#column'）的ul进行操作，对一个UL＃列进行操作你有，但当然你的HTML有许多其他的“列”，所有这些列都有你想要它的类“列”（'.column'）。

只是为了获得您想要做的开始，更改 smartColumn.js 中所有选择器，说明'ul#column'说{{1相反，然后更改HTML，以便第一个“列”具有'ul.column'而不是class="column"。

至少应该解决100％宽的列。

那应该解决你的“主要”问题。但还有其他问题。

jQuery函数需要在ajax完成后再次运行

4 个答案: