Question

我有php代码，它使用onclick函数生成html。实际上这是产品清单。有些产品可能有颜色。我的代码创建了颜色选择的下拉菜单。对于颜色选择我使用参数，product_id和选择颜色的onclick javascript函数。我想得到选择的颜色，而不是产品图片。但它只需要第一个生成产品的参数我的代码：

<?php
                    $query="select * from v_products";
        try{
            $stmt = $dbh->query($query);
            $stmt->setFetchMode(PDO::FETCH_ASSOC);              
        }catch (PDOException $pe) {
            die("Could not connect to the database $dbname :" . $pe->getMessage());
        }
    while ($r = $stmt->fetch()):
    ?>
    <div class="col-md-3 col-sm-6 hero-feature">
            <div class="thumbnail">
                <img src="<?php echo htmlspecialchars($r['photo_url']);?>" alt="" width="800" height="500" id=<?php echo "img".$r['product_id']; ?>>
                <div class="caption">
                    <p style="background-color:#FFD700;"><?php echo htmlspecialchars($r['product_name']);?></p>
                    <p>Артикуль:<?php echo htmlspecialchars($r['product_articul']);?></p>
                    <p>Количество:<?php echo htmlspecialchars($r['quantity']);?></p>
                    <p style="font-size:large;" color=red>Цена:<?php echo htmlspecialchars($r['price']);?>&#8364;</p>
                    <p>
                        <a href="#" class="btn btn-primary" id=myBtn>Buy Now!</a> <a href="#" class="btn btn-default">More Info</a>
                    </p>
                    <?php
                    if($r['number_of_colours']!=0){

                        $q_palitra="select * from colors where product_id='".$r['product_id']."'";
                        try{
                        $stmt1 = $dbh->query($q_palitra);
                        $stmt1->setFetchMode(PDO::FETCH_ASSOC);             
                        }catch (PDOException $pe1) {
                            die("Could not connect to the database $dbname :" . $pe1->getMessage());
                        }
                        ?>
                        <div id="image-dropdown" >
                        <?php
                        $i=1;
                        while ($p = $stmt1->fetch()):
                        ?>
                            <input type="radio" id=<?php echo "line".$i; ?> name="line-style" value=<?php echo $i; ?>  onclick="<?php echo "lalalalala('".$r['product_id']."','".$p['color_url']."');";?>" /><label for=<?php echo "line".$i; ?> style="<?php echo "background:url('".$p['color_url']."') 50% 50%;"; ?>"></label>
                        <?php
                        $i++;
                        endwhile;
                        ?>
                        </div>
                        <?php
                        }
                        ?>
                </div>

            </div>
        </div>
    <?php 
    endwhile;
    }
    ?>

生成的HTML：

<div class="col-md-3 col-sm-6 hero-feature">
            <div class="thumbnail">
                <img src="../images/products/batman_ink_by_zombies_616-d5ljte8.jpg" alt="" width="800" height="500" id=img1>
                <div class="caption">
                    <p style="background-color:#FFD700;">Крем-мусс</p>
                    <p>Артикуль:223201</p>
                    <p>Количество:5</p>
                    <p style="font-size:large;" color=red>Цена:6&#8364;</p>
                    <p>
                        <a href="#" class="btn btn-primary" id=myBtn>Buy Now!</a> <a href="#" class="btn btn-default">More Info</a>
                    </p>
                                        </div>

            </div>
        </div>
            <div class="col-md-3 col-sm-6 hero-feature">
            <div class="thumbnail">
                <img src="../images/products/batwing_somewhat_3d_by_qbatmanp.jpg" alt="" width="800" height="500" id=img2>
                <div class="caption">
                    <p style="background-color:#FFD700;">Test</p>
                    <p>Артикуль:bla bla bla</p>
                    <p>Количество:2</p>
                    <p style="font-size:large;" color=red>Цена:152&#8364;</p>
                    <p>
                        <a href="#" class="btn btn-primary" id=myBtn>Buy Now!</a> <a href="#" class="btn btn-default">More Info</a>
                    </p>
                                        </div>

            </div>
        </div>
            <div class="col-md-3 col-sm-6 hero-feature">
            <div class="thumbnail">
                <img src="../images/products/aa.jpg" alt="" width="800" height="500" id=img7>
                <div class="caption">
                    <p style="background-color:#FFD700;">Test</p>
                    <p>Артикуль:2225xx</p>
                    <p>Количество:14 4</p>
                    <p style="font-size:large;" color=red>Цена:114&#8364;</p>
                    <p>
                        <a href="#" class="btn btn-primary" id=myBtn>Buy Now!</a> <a href="#" class="btn btn-default">More Info</a>
                    </p>
                                                <div id="image-dropdown" >
                                                        <input type="radio" id=line1 name="line-style" value=1  onclick="lalalalala('7','../images/palitra/Test/Microsoft Office Access 2007.lnk');" /><label for=line1 style="background:url('../images/palitra/Test/Microsoft Office Access 2007.lnk') 50% 50%;"></label>
                                                        <input type="radio" id=line2 name="line-style" value=2  onclick="lalalalala('7','../images/palitra/Test/Microsoft Office Excel 2007.lnk');" /><label for=line2 style="background:url('../images/palitra/Test/Microsoft Office Excel 2007.lnk') 50% 50%;"></label>
                                                        <input type="radio" id=line3 name="line-style" value=3  onclick="lalalalala('7','../images/palitra/Test/Microsoft Office Groove 2007.lnk');" /><label for=line3 style="background:url('../images/palitra/Test/Microsoft Office Groove 2007.lnk') 50% 50%;"></label>
                                                        <input type="radio" id=line4 name="line-style" value=4  onclick="lalalalala('7','../images/palitra/Test/Microsoft Office InfoPath 2007.lnk');" /><label for=line4 style="background:url('../images/palitra/Test/Microsoft Office InfoPath 2007.lnk') 50% 50%;"></label>
                                                        <input type="radio" id=line5 name="line-style" value=5  onclick="lalalalala('7','../images/palitra/Test/Microsoft Office OneNote 2007.lnk');" /><label for=line5 style="background:url('../images/palitra/Test/Microsoft Office OneNote 2007.lnk') 50% 50%;"></label>
                                                        <input type="radio" id=line6 name="line-style" value=6  onclick="lalalalala('7','../images/palitra/Test/Microsoft Office Outlook 2007.lnk');" /><label for=line6 style="background:url('../images/palitra/Test/Microsoft Office Outlook 2007.lnk') 50% 50%;"></label>
                                                        <input type="radio" id=line7 name="line-style" value=7  onclick="lalalalala('7','../images/palitra/Test/Microsoft Office PowerPoint 2007.lnk');" /><label for=line7 style="background:url('../images/palitra/Test/Microsoft Office PowerPoint 2007.lnk') 50% 50%;"></label>
                                                        <input type="radio" id=line8 name="line-style" value=8  onclick="lalalalala('7','../images/palitra/Test/Microsoft Office Publisher 2007.lnk');" /><label for=line8 style="background:url('../images/palitra/Test/Microsoft Office Publisher 2007.lnk') 50% 50%;"></label>
                                                        <input type="radio" id=line9 name="line-style" value=9  onclick="lalalalala('7','../images/palitra/Test/Microsoft Office Word 2007.lnk');" /><label for=line9 style="background:url('../images/palitra/Test/Microsoft Office Word 2007.lnk') 50% 50%;"></label>
                                                        <input type="radio" id=line10 name="line-style" value=10  onclick="lalalalala('7','../images/palitra/Test/Digital Certificate for VBA Projects.lnk');" /><label for=line10 style="background:url('../images/palitra/Test/Digital Certificate for VBA Projects.lnk') 50% 50%;"></label>
                                                        <input type="radio" id=line11 name="line-style" value=11  onclick="lalalalala('7','../images/palitra/Test/Microsoft Clip Organizer.lnk');" /><label for=line11 style="background:url('../images/palitra/Test/Microsoft Clip Organizer.lnk') 50% 50%;"></label>
                                                        <input type="radio" id=line12 name="line-style" value=12  onclick="lalalalala('7','../images/palitra/Test/Microsoft Office 2007 Language Settings.lnk');" /><label for=line12 style="background:url('../images/palitra/Test/Microsoft Office 2007 Language Settings.lnk') 50% 50%;"></label>
                                                        <input type="radio" id=line13 name="line-style" value=13  onclick="lalalalala('7','../images/palitra/Test/Microsoft Office Diagnostics.lnk');" /><label for=line13 style="background:url('../images/palitra/Test/Microsoft Office Diagnostics.lnk') 50% 50%;"></label>
                                                        <input type="radio" id=line14 name="line-style" value=14  onclick="lalalalala('7','../images/palitra/Test/Microsoft Office Picture Manager.lnk');" /><label for=line14 style="background:url('../images/palitra/Test/Microsoft Office Picture Manager.lnk') 50% 50%;"></label>
                                                    </div>
                                            </div>

            </div>
        </div>
            <div class="col-md-3 col-sm-6 hero-feature">
            <div class="thumbnail">
                <img src="../images/products/MasterCard-Debit.jpg" alt="" width="800" height="500" id=img8>
                <div class="caption">
                    <p style="background-color:#FFD700;">Новое</p>
                    <p>Артикуль:15xx1592</p>
                    <p>Количество:10 3</p>
                    <p style="font-size:large;" color=red>Цена:12003&#8364;</p>
                    <p>
                        <a href="#" class="btn btn-primary" id=myBtn>Buy Now!</a> <a href="#" class="btn btn-default">More Info</a>
                    </p>
                                                <div id="image-dropdown" >
                                                        <input type="radio" id=line1 name="line-style" value=1  onclick="lalalalala('8','../images/palitra/Новое/11.PNG');" /><label for=line1 style="background:url('../images/palitra/Новое/11.PNG') 50% 50%;"></label>
                                                        <input type="radio" id=line2 name="line-style" value=2  onclick="lalalalala('8','../images/palitra/Новое/2.PNG');" /><label for=line2 style="background:url('../images/palitra/Новое/2.PNG') 50% 50%;"></label>
                                                        <input type="radio" id=line3 name="line-style" value=3  onclick="lalalalala('8','../images/palitra/Новое/3.PNG');" /><label for=line3 style="background:url('../images/palitra/Новое/3.PNG') 50% 50%;"></label>
                                                        <input type="radio" id=line4 name="line-style" value=4  onclick="lalalalala('8','../images/palitra/Новое/4.PNG');" /><label for=line4 style="background:url('../images/palitra/Новое/4.PNG') 50% 50%;"></label>
                                                    </div>
                                            </div>

            </div>
        </div>

对于javascript，它只获得第一个产品ID和第一个产品的第一个颜色如何为我的javascript代码获取适当的参数。

function lalalalala(o, b){
 /*if(o.id=='line6'){*/
 //$("#img"+o).attr('src',b);
/*}else
$("#ccc").attr('src',array[0]);
*/
 //document.getElementById("'img'+o").src=b+"";
alert(b);
}

Answer 1

您在onclick事件中分配函数返回值。因为您想为不同的字段分配不同的参数，我建议更改功能：

function lalalalala(o, b) {

    return function() {
        // what you want to happen onclick goes here
        alert(b);
    }

}

这样，您实际上为onclick事件分配了一个函数：lalalalalala()返回的函数。

Answer 2

我在jsbin.com上尝试了你的HTML和JS功能

它工作得非常好。看看这里 -

http://jsbin.com/setezijabu/edit?html,js,output

JS函数不使用给定参数

2 个答案: