1

大家好，我需要能够通过多个 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。提前致谢！

4

1 回答 1

0

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

$()PrototypeJS 有一个与 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()方法，如果链上更远的样式将元素显示设置为“无”，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()oron()方法添加了出色的事件处理——它们是相同的方法，只是名称不同，看起来所有的下拉菜单都在做同样的事情，所以我们也可以为它们添加一个类，例如selectblocks

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

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

invoke()将采用一个数组并对数组中的每个项目执行相同的方法，在这种情况下observe()，方法名称之后的任何参数都传递给方法，在这种情况下function()定义

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

this仍然是事件发生的元素

您还可以$$()使用符号直接访问元素，该[]符号允许您访问页面上的第三种形式并触发submit()

让我知道您是否有任何问题以及任何不合理的地方。

于 2012-11-18T16:50:58.853 回答