Question

大家好我需要能够通过多个ID block0_b7和block1_b7进行搜索。这是我目前的代码：

    <script type="text/javascript">
 window.onload = function() {
var searchString = "Incident",
    pageContent = document.getElementById("block1_b7").innerHTML;
var searchString2 = "Voice Services",
    pageContent = document.getElementById("block1_b7").innerHTML;
var searchString3 = "Data Service EVDO-1X & LTE",
    pageContent = document.getElementById("block1_b7").innerHTML;
if (pageContent.indexOf(searchString) != -1) 
   document.getElementById("areas").style.display = "inline";
if (pageContent.indexOf(searchString2) != -1) 
   document.getElementById("dropdown").style.display = "inline";
if (pageContent.indexOf(searchString3) != -1) 
   document.getElementById("dropdown2").style.display = "inline";
}
</script>  <script type="text/javascript">
    var mydropdown = document.getElementById('dropdown');
    var mydropdown2 = document.getElementById('dropdown2');
 var myareas = document.getElementById('areas');
    mydropdown.onchange = function(){
         comment_body.value = comment_body.value +'\n'+ this.value;
  var f = document.forms[2].submit();
           f.submit();
    }
 mydropdown2.onchange = function(){
        comment_body.value = comment_body.value +'\n'+ this.value;
  var f = document.forms[2].submit();
           f.submit();
    }
 myareas.onchange = function(){ 
        comment_body.value = comment_body.value +'\n'+ this.value;
           var f = document.forms[2].submit();
           f.submit();
    }

我试过这个：

var x, divArray = ["block1_b7", "block0_b7"];
for (x in divArray) {
        if (x) {
var searchString4 = "Incident",
  var  pageCon = document.getElementById(divArray[x]).innerHTML; 
}

我不能使用jquery，但我确实有原型1.7。提前谢谢！

Answer 1

如果你有PrototypeJS可用，你可以简化很多这个javascript

PrototypeJS有一个实用函数$()，它与document.getElementById()相同，但它将返回一个扩展了所有PrototypeJS函数的DOM元素。您还可以将多个id传递给$()函数，该函数将返回扩展DOM元素数组。

让我们看一下你的第一个<script>块

window.onload = function() {
var searchString = "Incident",
    pageContent = document.getElementById("block1_b7").innerHTML;
var searchString2 = "Voice Services",
    pageContent = document.getElementById("block1_b7").innerHTML;
var searchString3 = "Data Service EVDO-1X & LTE",
    pageContent = document.getElementById("block1_b7").innerHTML;
if (pageContent.indexOf(searchString) != -1) 
   document.getElementById("areas").style.display = "inline";
if (pageContent.indexOf(searchString2) != -1) 
   document.getElementById("dropdown").style.display = "inline";
if (pageContent.indexOf(searchString3) != -1) 
   document.getElementById("dropdown2").style.display = "inline";
}

这可以减少到下面。注意show()方法，如果链上的样式将元素显示设置为'none'，则show()将无效。您也可以使用第二行直接设置样式。

window.onload = function() {
var searchStrings = ["Incident", "Voice Services", "Data Service EVDO-1X & LTE"];
searchStrings.each(function(str) {
    if($("block1_b7").innerHTML.include(str)) {
        $("block1_b7").show();
        //$("block1_b7").setStyle({display, "inline"});
    }
});

使用$()方法的多个ID

window.onload = function() {
var searchStrings = ["Incident", "Voice Services", "Data Service EVDO-1X & LTE"];
searchStrings.each(function(str) {
    $("block0_b7", "block1_b7").each(function(element) {
        if(element.innerHTML.include(str)) {
            element.show();
            //element.setStyle({display, "inline"});
        }
    }
});

如果你有多个ID，你想检查我会建议在它们上面放一个类（下面的“searchblocks”），这样你可以添加更多，而不更新javascript代码

searchStrings.each(function(str){
    $$(".searchblocks").each(function(element){
        if(element.innerHTML.include(str)){
            element.show();
            //element.setStyle({display:"inline"});
        }
    });
});

看看你的第二个街区

var mydropdown = document.getElementById('dropdown');
var mydropdown2 = document.getElementById('dropdown2');
var myareas = document.getElementById('areas');
mydropdown.onchange = function(){
    comment_body.value = comment_body.value + '\n' + this.value;
    var f = document.forms[2].submit();
    f.submit();
}
mydropdown2.onchange = function(){
    comment_body.value = comment_body.value + '\n' + this.value;
    var f = document.forms[2].submit();
    f.submit();
}
myareas.onchange = function(){ 
    comment_body.value = comment_body.value + '\n' + this.value;
    var f = document.forms[2].submit();
    f.submit();
}

Prototype通过observe()或on()方法添加了出色的事件处理 - 它们只是不同的名称相同的方法，看起来所有的下拉列表都做同样的事情所以我们可以添加一个类也适用于所有人，例如selectblocks

$$(".selectblocks").invoke("observe","change",function(){
    comment_body.value += '\n' + this.value;
    $$("form")[2].submit();
});

一点点解释$$()通过CSS选择器获取元素，并返回一个扩展DOM元素数组。

invoke()将获取数组并对数组中的每个项执行相同的方法，在此实例中observe()并将方法名称后的所有参数传递给方法，在本例中为{ {1}}定义

您可以简化function()以使用comment_body.value = comment_body.value + '\n' + this.value;运算符添加或连接右侧的左侧。

+=仍然是事件发生的元素

您还可以使用this表示使用$$()直接访问元素，这样您就可以访问页面上的第3个表单并触发[]

如果您有任何问题，如果有任何问题没有意义，请告诉我。

我需要能够选择两个ID

1 个答案: