DOM要素を変数として割り当てて操作する方法

実際のDOM要素を操作しているように、html要素を変数に代入して操作することができます。DOM要素を変数として割り当てて操作する方法

この例では、showAlert（）関数が呼び出されると、渡されているIDを受け取り、divを表示します。デフォルトは隠されており、DIV内にテキスト値が設定されています。

これを行うにはどのような方法が最適ですか？

HTML：

<div class="alert" id="myCustomAlert12345" style="display:none" > 
</div>

Javascriptを：

function showAlert(alertDivID, alertMessage, alerttype){   
     if(alertDivID&& alertMessage){ 
      currentDiv = $('#'+alertDivID);    
      currentDiv.show(); 
      currentDiv.html(alertMessage); 
     } 
} 

showAlert("myCustomAlert12345","some error message goes here","error");

出典

2012-02-17 Andre

このコードはわかりやすいようです。問題が何であるかはわかりません。 –

はこれを "オフページDOM"と同義ですか？ここで多少関連があります：http://stackoverflow.com/q/9319017/575527 – Joseph

グローバル変数を使用しない限り、 'currentDiv'の最初のインスタンスの前に' var'ステートメントを使用して、変数がローカルで作成されるようにしてください。 – Jasper

あなたが関数にjQueryのオブジェクトを渡すことができます。

var showAlert = function ($el, mes){     
    $el.show(); 
    $el.append('<p>'+ mes +'</p>'); 
}; 

showAlert($('.item'), 'My Message');

出典

2012-02-17 22:16:21 elclanrs

あなたは以下のようにすることができます。これにより、渡されたIDが使用され、適切なメッセージとともにdivが表示されます。エレメントをチェックする前に、DOMが完全にロードされるのを待っていることを確認するだけです。

<html> 
<head> 
    <script src="http://code.jquery.com/jquery-1.7.1.js"></script> 
</head> 
<body> 
    <div class="alert" id="custAlert" style="display: none"></div> 
    <input type="button" class="showError" value="click me to show error" /> 

    <script type="text/javascript"> 
     function showAlert(divID, msg) { 
      $('#' + divID).html(msg); 
      $('#' + divID).show(); 
     } 

     $(function() { 
      $('.showError').click(function() { 
       showAlert('custAlert', 'this is an error'); 
      }); 
     }); 
    </script> 

</body> 

</html>

出典

2012-02-17 22:23:15 Sam

DOM要素を変数として割り当てて操作する方法

答えて

関連する問題