2017-06-07 7 views
0

既にお答えいただきましたことについてお詫び申し上げます。私はこれを解決しようとしましたが、私はこれを働かせることができませんでした(私はjavascriptの男ではないので混乱するかもしれません)。ダイナミック部門のdivテキストを動的に変更する方法

jsライブラリから動的に生成されたdivのテキストを変更したい私はショーのエラーメッセージに使用しています。

私は要素が定義されていない場合、私はチェックを試してみました

$('document').ready(function() { 
    $('.error-message')[item_number].innerText.replace('old string','new string'); 
} 

のようにそのクラスでのjQueryを使用して要素を変更し、そのための条件を入れてみましたとも、簡単なJavaScriptを使用しようとしました。しかし、私は問題がそれではないと思うが、この機能は動的に実行されておらず、jsコンソールで動作するので、その場で値を変更することはない。

誰かが私がこれについて学び、使用する必要があるものに答えるなら、私は感謝します。私はこれがajaxを必要とすると私は純粋なjsまたはjqueryでこれを行うことができる必要がありますとは思わない。しかし、これを処理するためには、Ajaxの深い掘り下げが必要な場合はお知らせください。

私が望むようにjsコンソールでテキストを変更できることに注意してください。その私は、私が変更しようとしているdivも飛行中に生成されているので、これを即座に処理することができません。

+1

。 – doutriforce

+0

文字列 'replace()'は元の文字列を変更しません。新しい文字列を返します。 –

+1

DOMのテキストは変更しようとしていますか?ダイナミックでまだロードされていない場合は、テキストを操作する前にテキストが存在するのを待つ必要があります。 –

答えて

1

jQueryを使用しているので、これはうまくいくはずです。

$('document').ready(function() { 
    $('.error-message')[item_number].text('new string'); 
} 
0

バニラjsのコードは次のようになります。代わりに `.innerText`、(` .textセクションを使用してみてください) `の

document.getElementsByClassName("error-message")[item_number].innerHTML = "something else here" 
0

ソリューション

$(function() 
 
{ 
 
    $('.add_div').click(function(event) 
 
    { 
 
    // Dynamically add div 
 
    var $new_div = $('<div class="new_div"/>').text('default text'); 
 

 
    // Prepend so you don't have to scroll to see the div update 
 
    $('.div_container').prepend($new_div); 
 
    flash_first_div(); 
 
    }); 
 

 
    $('.update_text').click(function(event) 
 
    { 
 
    var date = new Date(), 
 
     hour = date.getHours(), 
 
     minutes = date.getMinutes(), 
 
     seconds = date.getSeconds(); 
 

 
    // UPDATE LAST DYNAMICALLY CREATED DIV 
 
    $('.new_div').first().text('text updated at ' + hour + ':' + minutes + ':' + seconds); 
 
    flash_first_div(); 
 
    }); 
 
    
 
    // Just a helper function to highlight the targeted div 
 
    function flash_first_div() 
 
    { 
 
    var $last_div = $('.new_div').first(); 
 
    
 
    $last_div.addClass('flash'); 
 

 
    window.setTimeout(function(){$last_div.removeClass('flash');},500); 
 
    }; 
 
});
button{font-size:16px} 
 
div{transition: background 1s;margin-bottom:10px} 
 
.new_div{padding:0.5em;border:1px solid #000000} 
 
.flash{background:yellow}
<!DOCTYPE html> 
 
<html> 
 
<body> 
 
<div id='buttons'> 
 
    <button class='add_div'>Add Div</button> 
 
    <button class='update_text'>Update text of last created div</button> 
 
</div> 
 
<div class='div_container'></div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
</body> 
 
</html>

関連する問題