-1

更新：很抱歉我的帖子被许多用户误解了。我会尽量说得更清楚。我正在使用 Drupal，并且创建了三个浮动横幅。在首页有一个块（block1），显示一个浮动横幅，刷新后第二个出现，第三个也出现。就像之前写的这些横幅有一个小 X 按钮来停止溢出。我已将此脚本放在其中一个横幅中，并且效果很好。

<script language="javascript">
function doexpand() {
    document.getElementById("block1").style.overflow = "visible";
}

function dolittle() {
    document.getElementById("block1").style.overflow = "hidden";
}    
</script>

真正的问题是在类别页面中我有#block2 和文章#block3。这些块显示相同的横幅。上面的代码仅适用于一个 ID。在这种情况下#block1。当我从其他主题中阅读时，document.getElementById 不适用于更多 ID。

我用 jQuery 尝试了两个块标识，如下所示：

(function ($) {

    function doexpand() {
     $("#block1,#block2").css("overflow","visible");
    }
    function dolittle() {
     $("#block1,#block2").css("overflow","hidden");
    }

    })(jQuery);

它不工作。firebug/console 显示：ReferenceError: doexpand 未定义。

我也尝试过使用 jQuery 的单个块，如下所示：

(function ($) {

        function doexpand() {
         $("#block1").css("overflow","visible");
        }
        function dolittle() {
         $("#block1").css("overflow","hidden");
        }

        })(jQuery);

它显示相同的错误。

注意：Drupal 有不同的包装，它是这样的：

(function ($) {
        //your existing code
    })(jQuery);
4

7 回答 7

3

请查看jQuery 选择器。

我认为在您的情况下，最好在 css 的帮助下为多个元素应用样式。例如：

<script language="javascript">
function doexpand() {
    $('.block').style.overflow="visible";
}
function dolittle() {
    $('.block').style.overflow="hidden" ;
}
</script>

请添加class="block"到您要应用此样式/功能的所有块中，它将应用于所有具有 css 类“块”的块。

于 2013-06-25T07:47:19.920 回答
1

jQuery？

HTML：

<div class="block2"></div>

JS：

function doExpand(selector) {
    if ( $(selector).length ) {
        $(selector).css({'overflow':'visible'});
    }
}

使用非 ID 选择器调用看起来像这样：（jQuery 语法）：doExpand('.block2');

于 2013-06-25T07:37:34.200 回答
0

真的很简单，jQuery 选择大部分基于 css 选择器。然后将这些选择器转换为 jQuery 对象中保存的 dom 对象数组。

function doexpand() {
 $("#block1").css("overflow","visible");
}
function dolittle() {
 $("#block1").css("overflow","hidden");
}
于 2013-06-25T07:37:03.747 回答
0

你不应该有多个具有相同 ID 的 HTML 元素（这就是为什么document.getElementById只返回一个元素）

你可以直接block2参考block3document.getElementById("block2").style.overflow="hidden" ;

或使用getElementByClassName

var elements = document.getElementsByClassName("yourClass")

它将获取具有特定类的所有元素。

如果您想像jQuery其他答案一样使用建议您可以匹配元素名称。例如：

$('div[id^="block"]').css("overflow", "visible");

这将匹配所有以 .开头的div元素。您还可以使用其他通配符，例如for contains 和for ends with。IDblock*$

于 2013-06-25T07:37:43.337 回答
0

这是您在 jQuery 中的 Javascript 代码。我不明白你想要做什么，但你可以在函数中传递参数。此代码下的示例。

<script language="javascript">
function doexpand() {
$("#block1").css({'overflow': 'visible'});
}
function dolittle() {
$("#block1").css({'overflow': 'hidden'});
}
</script>

就这个

<script language="javascript">
function doexpand(element) {
$("#" + element).css({'overflow': 'visible'});
}
function dolittle(element) {
$("#" + element).css({'overflow': 'hidden'});
}
</script>

比你可以这样称呼它：doexpand("theIDofTheElement");

于 2013-06-25T07:37:51.430 回答
0

上面的代码在 jQuery（这是一个 JavaScript 库）中完全有效。

如果你想使用更典型的 jQuery 代码，你可以这样做

$('#block1').css('overflow', 'visible');

您可以像这样将其扩展为多个 id：

$('#block1, #block2').css('overflow', 'visible');

您始终可以从 jQuery 对象获取 DOM 对象，这意味着您还可以调整代码以使用 jQuery 选择器

$('#block1').get(0).style.overflow="visible";

（这个具体的例子并不聪明：如果你不使用复杂的选择器或 jQuery 函数，就不需要使用 jQuery）

于 2013-06-25T07:36:23.923 回答
-1

Jquery 中的替代方法document.getElementById("an_element); 是： $("#an_element"); 它可以在 JQuery 中正常工作，只是 JQuery 让事情变得更快、更简洁。

于 2013-06-25T07:37:18.340 回答