InnerHtmlを属性に変更する方法

Question

titleクラスのInnerHTMLをalt属性と同じに変更する方法を示すことができます。実際のウェブサイトのためのjarretonions.co.za

おかげ

  $(document).ready(function() { 

      $(".pic").on("click", function() { 
      $(".modal").show(); 
      var srclong = $(this).attr("src"); 
      var srcshort = srclong.split("_"); 
      var srcextension= srclong.split("."); 
      $(".modal img").attr("src", srcshort[0]+'.'+srcextension[1]); 
     ************is it something like this******** 
       var title = $(this).attr("alt"); 
       $(".modal span").InnerHTML= title; 

      OR 
       document.getElementByClassName('titles').innerHTML = title; 
      }) 

+

 echo 
          "<div class='art'> 
          <img class='pic' src='img/".$row["name"]."_tnail.jpg' 
alt='".$row["name"]." • ".$row["year"]." • ".$row["type"]."' 
height='auto' width='100%'/>  
          <div class='modal'> 
          <img class='big'/> 
          <span class='titles'></span> 
         </div>  
        </div>" 
          ; 

Answer 1

あなたはjQueryのを使用しているので、あなたは$(".title")を使用して、これらの要素を選択し、それらを直接変更することができます。そのような何か：https://jsfiddle.net/wmjtfLja/1/

なお、クラス.titleの複数の要素を持っている場合、それらはすべて変更は以下となります。ここでは

$(document).ready(function() { 
    $(".pic").on("click", function() { 
    $(".title").text($(this).attr("alt")); 
})}); 

はフィドルです。だから、あなたはクリックした画像からidまたは相対パスでタイトル要素を選択したいかもしれません。

Answer 2

事前に、質問に完全に揃っていない回答を提示する危険性があることを知り、私は最初にjqueryに存在しないものを参照していたと思ったメルポメンからのコメントにぶつかった。

getElementByClassNameが存在しないため、melpomeneは100％正確です。 正しい構文はgetElementsByClassNameです。

小さなタスクごとにjqueryをロードするのは本当に冗長で、純粋なjavascriptの半ダースライン以上のクラスで操作できるので、helloworldも正しい（構文エラーは別として）。

しかし、クラスによって要素を取得することは、戻り値が「生きている」配列なので危険です。

たとえば、dylanの最初の質問では、クラスを取得することは、最初のインスタンスを返すだけで便利です（配列の長さは、それが適用されるelemntの数の目安にすぎません）。したがって、ディランが提案したとおりに変更するには、それぞれ独自のボタンが必要です。 （これは、同じクラス名を持つすべての要素に影響を与えると言ったときに間違っていると私は思っていますが、ループを実行するときに他の値をインプットする（またはクラス名を変更する）属性上）。

次の点を考慮してください（オンザフライクラスの変更）。

function otf_cls_change(cls_original,cls_replace){ 
var a=document.getElementsByClassName(cls_original); 
l=a.length; 
if (l==0){return 0;} 
do { 
    a[0].setAttribute('class',cls_replace); 
    a=document.getElementsByClassName(cls_original); 
    l=a.length; 
} while (l>0); 
} 

これは、オンザフライでクラス名を変更する場合に有効です。我々はそれがブラウザが無限ループをヒットさせるコードと

//change this a[0].setAttribute('class',cls_replace); // to 
a[0].innerHTML='this_html'; 

を変更した場合

しかし、。

なぜですか？ ElementByClassによって返されたライブ配列は（たとえあなたが配列をループしようとしても）最初の項目だけを処理するためです。

したがって、クラスをオンザフライで変更するのは楽しく、非常に能力がありますが、クラスIDに固有でないすべての属性を変更することをお勧めします。

クラス属性をと一緒に変更すると、別の属性のも問題ありません。 たとえば、

a[0].innerHTML='this_html';    //do this first 
a[0].setAttribute('class',cls_replace); //then this 

上記は、クラス定義された要素をループするために機能します。

大規模な個人的な偽善の点で、人々が純粋なjavascriptソリューションを求め、jqueryでいくつかのウイングナットをチャンスすると、私は迷惑になります。私は明らかに、jquery関連の質問だったので、私はここで反対をやっていると思います。ここで私は純粋なjavascriptを投げ捨てています。申し訳ありませんが試合。

btw、ディラン、それに幸運。あなたは否定的なコメントに戻ってうれしいです。ここではあまりにも多くの人々が怒っていることを恐れ、風が強くなる。これはあなたのように聞こえる

HTH、

ゲイリー