2

php while ループを使用して、画像とテキストのテーブルを作成しています。右上隅の各行には、プラス記号とマイナス記号があります。プラス記号とマイナス記号だけが onclick イベントを持ちます。例えば

新しい行が作成されるたびに、画像と標識の ID が 1 ずつ増えます。

Row 1id="img1"プラス記号ありマイナスid="1"記号ありid="1".

Row 2id="img2"プラス記号があるid="2"マイナス記号がid="2"ある など。

これが私のスクリプトです：

function shrink(){
    var id = this.id;
    myimg = document.getElementById('img1');
    myimg.style.width = "200px";
}
function expand(){
    var id = this.id;
    myimg = document.getElementById('img' + id);
    myimg.style.width = "300px";
}

縮小は機能しますが、対応するプラス記号またはマイナス記号で縮小する画像を制御できません。

myimg = document.getElementById('img' + id);主な質問は、対応する変数 ID をどのように操作できるかということです。

サンプルテーブル

<table>

<tr>
<td style="vertical-align:top;">

    <a href="http://www.theverge.com/2013/6/13/4426360/massive-battery-life-killer-graphics-can-intels-haswell-deliver-on" target="_blank"><img src="http://cdn0.sbnation.com/entry_photo_images/8439797/DSC_4162_large_large.jpg" 
    width="300px" 
    style="padding:0px 5px 0px 5px;" id="story1"></a></td>
    <td style="vertical-align:top; margin-left:">
    <img src="http://t1.gstatic.com/images?q=tbn:ANd9GcQEs9xG9jEdXgirA-4GTEHLQ2VRdWjTjj0TChR49NBXdTbnq0H0" name="up" style="position:relative; right:0px; margin-top:20px; float:right;" width="20px" class="1" onclick="shrink()">
    <h4><a href="http://www.theverge.com/2013/6/13/4426360/massive-battery-life-killer-graphics-can-intels-haswell-deliver-on" target="_blank" style="text-decoration:none; color:orange;">Massive battery life, killer graphics: can Intel's Haswell deliver on the hype?</a></h4><date>The Verge - 
    12 hrs ago</date><p class="intro">For years now, it seems everyone has been waiting for Haswell, the latest processor from Intel that promises major improvements to graphics performance and battery life. The new silicon just...<br>
    New York City,United States </p></td>
    </tr></table>

JS Fiddle: http://jsfiddle.net/ZMkmc/
4

1 に答える 1

0

ページ上のすべての画像に ID を割り当てるのは少しやり過ぎです。代わりに、相対 dom ナビゲーションを使用してください。あなたのテーブルがこのように設定されているとしましょう (これはひどい html デザインであるため、そうすべきではありません:-p):

<tr>
    <td><img src="somefile.png"/></td>
    <td>
        <span onclick="grow(this)">+</span>
        <span onclick="shrink(this)">-</span>
    </td>
</tr>
<tr>
    <td><img src="somefile.png"/></td>
    <td>
        <span onclick="grow(this)">+</span>
        <span onclick="shrink(this)">-</span>
    </td>
</tr>

次に、JavaScript は次のようになります。

function fixDimensions(img) {
    if (img.style.width == '') {
      img.style.width = img.width + 'px';
    }
    if (img.style.height == '') {
      img.style.height = img.height + 'px';
    }
}

function grow(obj) {
    var img = obj.parentNode.parentNode.cells[obj.parentNode.cellIndex - 1].getElementsByTagName('img')[0];
    fixDimensions(img);
    img.style.width = parseInt(img.style.width) / 4 * 5 + 'px'; // - 25%
    img.style.height = parseInt(img.style.height) / 4 * 5 + 'px'; // - 25%
}

function shrink(obj) {
    var img = obj.parentNode.parentNode.cells[obj.parentNode.cellIndex - 1].getElementsByTagName('img')[0];
    fixDimensions(img);
    img.style.width = parseInt(img.style.width) / 4 * 3 + 'px'; // + 25%
    img.style.height = parseInt(img.style.height) / 4 * 3 + 'px'; // + 25%
}

obj.parentNode.parentNode は、セレクターを obj (+ または - を含むスパン) からその親 (td) とその親 (tr) にナビゲートします。

tr のセル コレクションを取得し、スパンの親 td の cellIndex のインデックス -1 を使用して、スパンの親 td の前のセル (その td の前の td) を選択します。

私の例では、幅と高さの 25% を追加および削除します。あなたはそれであなたの好みに合わせて遊ぶことができます。

于 2013-06-15T05:20:26.857 に答える