0

DBから返されるいくつかの画像にid属性を設定しようとしています

id 属性は、ユーザーがクリックした画像にのみ適用されます。

私の問題は、画像が重複していて、違いを区別するのが難しいことです。

クリックした画像srcを DB に保存して、どの画像に id 属性が必要かを識別します。

ユーザーが画像をクリックすると、IDが自動的に生成されます。

私のhtmlは

<div>
  <img src='test1.jpg'/>
  <img src='test1.jpg'/>
  <img src='test1.jpg'/>
  <img src='test2.jpg'/>
  <img src='test3.jpg'/>
</div>

PHPで画像をレンダリングする

$html is the string that are returning from DB. it has all kind of html tags.

$doc = new DOMDocument();

@$doc->loadHTML($html);

$imageTags = $doc->getElementsByTagName('img');

$imgSource is the array of images that are supposed to have id attribute
$imgID is the array of ids for the images that were clicked
$source is the current image taht are being checked

  foreach($imageTags as $tag) {
    $source=$tag->getAttribute('src');

    if(in_array($source, $imgSource)){
         $ids=array_keys($imgSource,$source);
                 foreach($ids as $id){
                    $tag->setAttribute('id',$imgID[$id]);
                    $htmlString=$doc->saveHTML();

                  }
              }
}

test1上記の私のコードは、ユーザーがクリックしてtest2画像を表示すると、以下のような html を生成します

<div>
  <img id='123' src='test1.jpg'/>
  <img id='123' src='test1.jpg'/>
  <img id='123' src='test1.jpg'/>
  <img id='456' src='test2.jpg'/>
  <img src='test3.jpg'/>
</div>

id123 はすべてtest1.jpgに適用され、それは私が望むものではありません。画像の位置インデックスを見つけることで、この問題を回避しようとしました。したがって、ユーザーが 2 番目をクリックするtest1.jpgと、インデックスは2 になります。ユーザーが 3 番目をクリックするtest1.jpgと、インデックスは 3 になります。

ただし、それを私のphpコードに適用する方法がわかりません。その時点ではphpのコードしか変更できません。誰でもそれについて私を助けることができますか? 本当にありがとう！

4

1 に答える 1

1

テストされていませんが、それがアイデアです：

  $counter = array();
  foreach($imageTags as $tag) {
    $source=$tag->getAttribute('src');

    if(in_array($source, $imgSource)){
         $ids=array_keys($imgSource,$source);
                 foreach($ids as $id){
                    $counter[$imgID[$id]] = isset($counter[$imgID[$id]]) $counter[$imgID[$id]] + 1 : 0;
                    $tag->setAttribute('id',$imgID[$id] . '-' . $counter[$imgID[$id]]);
                    $htmlString=$doc->saveHTML();

                  }
              }

次のような ID を取得します。

<div>
  <img id='123.0' src='test1.jpg'/>
  <img id='123-1' src='test1.jpg'/>
  <img id='123-2' src='test1.jpg'/>
  <img id='456-0' src='test2.jpg'/>
</div>
于 2013-02-13T22:11:56.573 に答える