1

こんにちは。複数のIDblock0_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には、と同じユーティリティ関数がありますdocument.getElementById()が、すべてのPrototypeJS関数で拡張されたDOM要素を返します。$()拡張DOM要素の配列を返す関数に複数のIDを渡すこともできます。

最初の<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()、効果はありません。2行目を使用して、スタイルを直接設定することもできます。

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"});
        }
    });
});

2番目のブロックを見てください

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

プロトタイプは、observe()またはon()メソッドを介して優れたイベント処理を追加します。これらは同じメソッドであり、名前が異なるだけで、すべてのドロップダウンが同じことを実行しているように見えるため、たとえば、すべてのドロップダウンにクラスを追加することもできます。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まだイベントが起こっている要素です

また、ページの3番目$$()の[]フォームにアクセスして、submit()

ご不明な点がございましたら、お気軽にお問い合わせください。

于 2012-11-18T16:50:58.853 に答える