Question

更新：很抱歉我的帖子被很多用户误解了。我会试着更清楚。我正在使用Drupal，我创建了三个浮动横幅。在首页上有一个块（块1），显示一个浮动横幅，刷新后第二个出现，第三个也出现。就像之前写的这些横幅有一个小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这样的两个块ID：

(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);

Answer 1

请查看jQuery Selectors。

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

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

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

Answer 2

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

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

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

你可以将它扩展到多个id：

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

您始终可以从jQuery对象获取DOM对象，这意味着您也可以使用

调整代码以使用jQuery选择器

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

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

Answer 3

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

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

Answer 4

jQuery的？

HTML：

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

JS：

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

使用非ID选择器调用如下所示：（jQuery语法）： doExpand（”。BLOCK2' ）;

Answer 5

你永远不应该有多个具有相同ID的HTML元素（这就是document.getElementById只返回一个元素的原因）

您可以直接block2，block3直接document.getElementById("block2").style.overflow="hidden" ;

或使用getElementByClassName

var elements = document.getElementsByClassName("yourClass")

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

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

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

这将匹配div以ID开头的所有block元素。您还可以使用其他通配符，例如*用于包含，$用于结尾。

Answer 6

这是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");

Answer 7

document.getElementById("an_element);的替代方案在Jquery中是：$（“＃an_element”）; 它在JQuery中运行良好，只是JQuery使事情更快，更简洁。

jQuery中的document.getElementById（）替代方案

7 个答案: