Question

我需要能够使用三个单选按钮来确定页面上的哪个P显示。从数据库中查询所有项目，因此没有固定的数字。如果可能的话，我想坚持使用javascript。全部都是在PHP代码中编写的

尝试使用以下内容：

        <?php
        //Javascript function to show selected duration price:
        echo"<script>
        function showPrice(duration)
        {
            if(duration == \"1\")
            {
                var a = document.querySelectorAll('p[id^=price1]')
                for (index = 0; index < a.length; ++index)
                {
                    document.getElementById(a[index]).style.display=\"block;\";
                }



            }
            else
            {
                var a = document.querySelectorAll('p[id^=price1]')
                for (index = 0; index < a.length; ++index)
                {
                    document.getElementById(a[index]).style.display=\"none;\";

                }

            }
            if(duration == \"2\")
            {
                var a = document.querySelectorAll('p[id^=price2]')
                for (index = 0; index < a.length; ++index)
                {
                    document.getElementById(a[index]).style.display=\"block;\";

                }

            }
            else
            {
                var a = document.querySelectorAll('p[id^=price2]')
                for (index = 0; index < a.length; ++index)
                {
                    document.getElementById(a[index]).style.display=\"none;\";

                }

            }
            if(duration == \"3\")
            {
                var a = document.querySelectorAll('p[id^=price3]')
                for (index = 0; index < a.length; ++index)
                {
                    document.getElementById(a[index]).style.display=\"block;\";

                }

            }
            else
            {
                var a = document.querySelectorAll('p[id^=price3]')
                for (index = 0; index < a.length; ++index)
                {
                    document.getElementById(a[index]).style.display=\"none;\";

                }

            }

        }
        </script>
        ";

然后每个P将有6个价格的选项，只有在选择了相应的无线电选项时才能看到它们：

    while($pack_row = mysql_fetch_array($packageResults))
    {
        echo"<div class=submenuContainer style=\"margin: 0px 0px 0px $leftMargin"."px; width: $product_params[linkContainerWidth]"."px;\">";
        echo"\n\n\n <a class=submenu title=\"{$pack_row["package_name"]}\" id='package_id' href=\"javascript:ajaxFunction({$pack_row["package_id"]},null);inPagePopup();\" style=\"background-image: url('$link_bg_img');  height: $product_params[link_height]"."px; width: $product_params[link_width]"."px; \">";
        echo"\n</a>";
        echo"\n<span class=submenuExtraText>";
        $pricesAry = price_calculator("{$pack_row["package_id"]}","","","");
        echo"\n <p style=\"float: left; text-align: left;\"><input class=\"$radioInputStyle\" type=radio name=leaseInfo[packageID] value={$pack_row["package_id"]}> SELECT</p>";

    //P's hidden unless lease duration selected below
        echo"\n <p class='priceDisplay' id='price1".$ck."' style=\"float: right; text-align: right; display: none;\"><b>\$".$pricesAry['subTotal'][1]."</b></p>";
        echo"\n <p class='priceDisplay' id='price2".$ck."' style=\"float: right; text-align: right; display: none;\"><b>\$".$pricesAry['subTotal'][2]."</b></p>";
        echo"\n <p class='priceDisplay' id='price3".$ck."' style=\"float: right; text-align: right; display: none;\"><b>\$".$pricesAry['subTotal'][3]."</b></p>";
        echo"\n <p class='priceDisplay' id='price4".$ck."' style=\"float: right; text-align: right; display: none;\"><b>\$".$pricesAry['subTotal'][4]."</b></p>";
        echo"\n <p class='priceDisplay' id='price5".$ck."' style=\"float: right; text-align: right; display: none;\"><b>\$".$pricesAry['subTotal'][5]."</b></p>";
        echo"\n <p class='priceDisplay' id='price6".$ck."' style=\"float: right; text-align: right; display: none;\"><b>\$".$pricesAry['subTotal'][6]."</b></p>";
        echo"\n</span>"; 
        echo"\n</div>";
        $ck++;
        $t++;
    }

这是收音机盒：

        echo"<b>How long?</b><br>";
        echo"<input id=duration1 class=radio type=radio name=leaseInfo[duration] value=\"1\" onClick=\"showPrice(1);\"> 3  &#160&#160&#160&#160";  
        echo"<input id=duration2 class=radio type=radio name=leaseInfo[duration] value=\"2\" onClick=\"showPrice(2);\" checked> 6  &#160&#160&#160&#160";
        echo"<input id=duration3 class=radio type=radio name=leaseInfo[duration] value=\"3\" onClick=\"showPrice(3);\"> 12  &#160&#160&#160&#160";
        echo"<br><br>";


?>

Answer 1

这样的东西？

JSFiddle

function showPrice(duration) {
    var prices = document.getElementsByClassName('priceDisplay');
    for (var i = 0; i < prices.length; i++) {
        var price = prices[i];
        if (price.classList.contains('p'+ duration))
            price.style.display = "block";
        else
            price.style.display = "none";
    }
}

<input id=duration1 class=radio type=radio name=leaseInfo[duration] value="1" onClick="showPrice(1)" checked><label for=duration1> Price 1</label>
<input id=duration2 class=radio type=radio name=leaseInfo[duration] value="2" onClick="showPrice(2)"><label for=duration2> Price 2</label>
<input id=duration3 class=radio type=radio name=leaseInfo[duration] value="3" onClick="showPrice(3)"><label for=duration3> Price 3</label>

<h3>Item 1</h3>
<p class='priceDisplay p1' id='price1-i1'><b>Price1: $35.45</b></p>
<p class='priceDisplay p2' id='price2-i1' style='display: none;'><b>Price2: $22.45</b></p>
<p class='priceDisplay p3' id='price3-i1' style='display: none;'><b>Price3: $654.45</b></p>
<p class='priceDisplay p4' id='price4-i1' style='display: none;'><b>Price4: $11.45</b></p>
<p class='priceDisplay p5' id='price5-i1' style='display: none;'><b>Price5: $5.45</b></p>
<p class='priceDisplay p6' id='price6-i1' style='display: none;'><b>Price6: $77.45</b></p>

<h3>Item 2</h3>
<p class='priceDisplay p1' id='price1-i2'><b>Price1: $45.65</b></p>
<p class='priceDisplay p2' id='price2-i2' style='display: none;'><b>Price2: $12.45</b></p>
<p class='priceDisplay p3' id='price3-i2' style='display: none;'><b>Price3: $14.35</b></p>
<p class='priceDisplay p4' id='price4-i2' style='display: none;'><b>Price4: $32.46</b></p>
<p class='priceDisplay p5' id='price5-i2' style='display: none;'><b>Price5: $45.52</b></p>
<p class='priceDisplay p6' id='price6-i2' style='display: none;'><b>Price6: $99.76</b></p>

使用单选框选择显示多个DIV

1 个答案: