Question

我正在运行AB拆分测试，该测试将修改一组用于运送选项的下拉选项，并创建四个包含运输信息的div容器。容器将是并排盒，可使用按钮选择。我无法修改原始的html。我需要通过修改javaScript和内部样式表来创建它。

这是我必须使用的HTML：

<div id="carrierCommonDiv">
    <div class="nc_shipping_price_desc">Prices below reflect&nbsp;<span urlPath="/checkout/shipping_policy_popup.jsp?policy=shipping" relativeObj="shippingChargePopup" class="shippingLink3 popLink checkout_popLink">shipping charges</span> for your order.</div>
    <div class="nc_shipping_carrier_select">
        <select id="carrierCode" name="carrierCode">
            <option value="UG" shippingTotal="$13.95" selected="selected" desc="">Standard Ground ( $13.95 )</option>
            <option value="UTS" shippingTotal="$22.45" desc="">Third Day Ground ( $22.45 )</option>
            <option value="US" shippingTotal="$27.45" desc="">Second Day Air ( $27.45 )</option>
            <option value="UNN" shippingTotal="$37.25" desc="">Next Day ( $37.25 )</option>
        </select>
    </div>

关于如何解决这个问题的想法？

目前看起来像这样：http://jsfiddle.net/kBws6/并且在完成后应该看起来像这样：http://jsfiddle.net/mMqpG/

Answer 1

好的，这是一个开始。

JS Fiddle Example

如果我正确地阅读你的帖子，看起来你想改变所有html的显示方式而不实际修改html。

这是一个简单的小提示，显示添加/删除这些元素的方法。我正在做的就是使用forEach函数迭代选项元素的切片数组并创建新的div元素，然后我使用事件委托来侦听对这些新div的点击。我使用了vanilla JS - 你真的不需要使用jQuery来做这种事情，但如果你想要它就是同样的想法（只需使用$ selectors和$(foo).on('click'...）。

显示效果并不完美，所以你会想要搞清楚，但它应该让你去。

Answer 2

这应该让你开始使用jQuery。

Demo in jsFiddle

首先，找到select元素并保存。循环遍历每个孩子。在每个循环中，您可以使用$(this)从每个选项中访问所需的所有信息并构建一些html。插入after select元素，最后hide原始选择元素：

var $select = $("#carrierCode");
$select.children("option").each(function() {
    var box = "<div class='shipOption' >"+$(this).text()+"</div>";
    $select.after(box);
});
$select.hide();

要添加任何 CSS规则，您应该指定文本，然后append指定head元素。以下是如何在线执行所有操作的示例，但最好是创建.css文件并直接链接到该文件。

//TEST
$("head").append("<style type='text/css'>"+
                      ".shipOption {"+
                        "height:150px;"+
                        "width:100px;"+
                        "display:inline-block;"+
                        "border:solid 1px #333;"+
                        "text-align:center;"+
                        "float: left;"+
                      "}"+
                  "</style>");

//PROD
$("head").append("<link rel='stylesheet' type='text/css' href='mystyle.css'>");

对于点击事件处理，在修改dom之后，只需为shipOption类的任何内容设置点击事件的侦听器：

$(".shipOption").click(function() {
    alert("You clicked "+$(this).attr("value"));
});

使用jQuery从下拉列表中提取信息并使用该信息创建div

2 个答案:

Demo in jsFiddle