0

ID が JavaScript を使用している場合、同様の種類の要素の css プロパティを変更する際に問題が発生します。

一連の非表示要素を介して php ループを実行しています。だから私はこのようなIDを持っimgstat_1imgstat_2います。

私が使用しているコードは

foreach($img as $img1){?>
    <li>
       <a href="#" onclick="changeimgstat('<?php echo $counter;?>')">
         <img src="<?php echo $img1->vchEventImg?>" width="75" height="75" alt="" id="abc_<?php echo $img1->vchImgStatus?>" />
       </a>
    </li>
    <input type = "hidden" value="<?php echo $img1->vchImgStatus?>" id="imgstat_<?php echo $counter;?>">
    <?php $counter++;
}?>
<input type="hidden" value="" name="newimg" id="newimg">

そしてこのようなjavascript

function changeimgstat(obj)
{
     var xyz = document.getElementById('newimg').value;
     alert(document.getElementById('abc_'+xyz));
     document.getElementById('abc_'+obj).style.border="3px solid red";
     var status = document.getElementById('imgstat_'+obj).value;
     document.getElementById('newimg').value = status;
}

だから誰かが私が間違っていることを提案できますか

4

4 に答える 4

0

私が見つけたように、あなたのコードにはエラーはありませんが、$counter前に定義しましたかforeach loop。そして、あなたはあなたがで使用しているものではなく、そうであるimg idべきです。abc_<?php echo $counter?>abc_<?php echo $img1->vchImgStatus?>javascript

試す:

CSS

.img3{border:3px solid red;}
.img{border:none;}

HTMLとPHP

<?php
$counter=1;
foreach($img as $img1){?>
    <li>
       <a href="#" onclick="changeimgstat('<?php echo $counter;?>')">
         <img class="img" src="<?php echo $img1->vchEventImg?>" width="75" height="75" alt=""  id="abc_<?php echo $counter?>" />
       </a>
    </li>
    <input type="hidden" value="<?php echo $img1->vchImgStatus?>" id="imgstat_<?php echo $counter;?>">
    <?php $counter++;
}?>
<input type="hidden" value="" name="newimg" id="newimg">

脚本

<script>
function removeAllClass()
{
    var allimg=document.getElementsByClassName("img");
    for(var index=0;index<allimg.length;index++)
    {
        allimg[index].className = "img";
    }
}   

function changeimgstat(obj)
{
     removeAllClass();
     document.getElementById('abc_'+obj).className="img img3";
     var status = document.getElementById('imgstat_'+obj).value;
     document.getElementById('newimg').value = status;
}
</script>
于 2013-03-07T04:46:37.623 に答える
0

あなたが持っているようです:

<img ... id="abc_<?php echo $img1->vchImgStatus?>">

<input ... value="<?php echo $img1->vchImgStatus?>" id="imgstat_<?php echo $counter;?>">

これらの2つの要素が期待するIDを持っていると確信していますか?

于 2013-03-07T04:47:15.933 に答える
0

次のことを試してください。

foreach($img as $img1){?>
    <li>
       <a href="#" onclick="changeimgstat('<?php echo $counter;?>')">
         <img src="<?php echo $img1->vchEventImg?>" width="75" height="75" alt="" id="abc_<?php echo $counter;?>" />
       </a>
    </li>
    <input type = "hidden" value="<?php echo $img1->vchImgStatus?>" id="imgstat_<?php echo $counter;?>">
    <?php $counter++;
}?>
<input type="hidden" value="" name="newimg" id="newimg">

Javascript:

function changeimgstat(obj)
{
     var xyz = document.getElementById('newimg').value;
     alert(document.getElementById('abc_'+xyz));
     document.getElementById('abc_'+obj).style.border="3px solid red";
     var status = document.getElementById('imgstat_'+obj).value;
     document.getElementById('newimg').value = status;
}

id = "abc_"を変更しました。これは、javascript関数では、渡されたパラメーターがカウンターであるため、同じ値がid値である必要があるためです。

于 2013-03-07T04:47:46.690 に答える
0

最善の解決策は、要素に css クラス属性を追加することです。そして、クラスのスタイルを書きます。

onclick 関数では、要素にクラスを追加できます

于 2013-03-07T04:44:53.993 に答える