Question

我让用户点击图片旁边的下拉菜单，有两个选项，比如说衬衫或马克杯。然后将它们定向到购买页面，需要选择衬衫/马克杯并选择图像。

我对着陆页的HTML有以下内容：

      <div class="row">
    <div class="col-xs-6 col-md-6 wk-left">
      <img class="wk-img"/>
      <%= image_tag('image.jpg', class: 'wk-img') %>
      <p class="image-header wk-img-head">Header</p>
      <p class="image-text">Sub Header</p>
      <p class="image-text">
        Some text
      </p>
      <br/>
      <div class="buttons">
        <div class="btn-group">
          <button type="button" class="btn merch dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Get a Collectible
            <span class="fa fa-angle-down" style="font-size:16px;"></span>
          </button>
          <ul class="dropdown-menu">
            <li>
              <a href="/url/image.jpg&type=shirt">T-Shirt</a>
            </li>
            <li>
              <a href="/url/image.jpg&type=mug">Mug</a>
            </li>
          </ul>
        </div>

对于产品页面，我让JS解析参数：

function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
    results = regex.exec(url);
return decodeURIComponent(results[2].replace(/\+/g, " "));}

var type = getParameterByName('type');
var image = getParameterByName('image');

我为所有内容提供了以下jQuery：

$(function(){
  $('div [button_type="'+ type +  '"]').addClass('btn wk-prd-btn pink');
  $('div [image-var="'+ image + '"]').removeClass('img-container1 image-container image-size img-pink').addClass('img-container1 image-size wk-after image-container');
});

因此该按钮适用于页面重新加载。它们标有用户点击的任何内容。图像，而不是。上面是最新的，因为我在重新加入之前一直在玩这个类。我认为问题是在加载页面时应用容器。尽管如此，仍然努力让它存在。我也包括了CSS。

CSS：

.image-container:hover .wk-after, .image-container.active .wk-after{
display: block;
background: rgba(231, 68, 129, 0.75);
}

.wk-after{
 display: flex;
justify-content: center;
align-items: center;}

.image-container.active .wk-after {
display: block;
background: rgba(231, 68, 129, 0.75);}

.image-container .wk-after {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
font-size: 16px;
display: none;
color: #FFF;}

我错过了应该使用样式的东西吗？

Answer 1

唉。只需要以下内容：

$(function(){
 $('div [image-var="'+ image + '"]').addClass('active');
});

如何使用JavaScript / jQuery将所选项目移植到新页面？

1 个答案: