0

Adobe Business Catalyst サイトで作成されたページに単純な jQuery を実装するのに問題があります。関連する HTML を以下に示します。

<div class="banner-main">
  <div class="banner-top">
    <section class="banner">
      <div class="catProdAttributeItem">
        <select id="banner-pic">
          <option value="30644690">Red </option>
          <option value="30791632">Purple </option>
        </select>
      </div>
    </section>
  </div>
</div>

次の HTML は、ページの作成時に生成されるものです。

<div class="banner-main">
  <div class="banner-top">
    <section class="banner">
      <div class="catProdAttributeItem">
        <div class="ddOutOfVision" id="banner-pic_msddHolder" style="height: 0px; overflow: hidden; position: absolute;">
          <select id="banner-pic" tabindex="-1">
            <option value="30644690">Red </option>
            <option value="30791632">Purple </option>
          </select>
        </div>
        <div class="dd ddcommon borderRadius" id="banner-pic_msdd" tabindex="0" style="width: 422px;">
          <div class="ddTitle borderRadiusTp">
            <span class="divider"></span>
            <span class="ddArrow arrowoff"></span>
            <span class="ddTitleText " id="banner-pic_title">
              <span class="ddlabel">Purple</span>
              <span class="description" style="display: none;"></span>
            </span>
          </div>
          <input id="banner-pic_titleText" type="text" autocomplete="off" class="text shadow borderRadius" style="display: none;">
          <div class="ddChild ddchild_ border shadow" id="banner-pic_child" style="z-index: 1; position: absolute; visibility: visible; height: 59px; top: 40px; display: none;">
            <ul>
              <li class="enabled _msddli_ selected">
                <span class="ddlabel">Red</span>
                <div class="clear"></div>
              </li>
              <li class="enabled _msddli_">
                <span class="ddlabel">Purple</span>
                <div class="clear"></div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  </div>
</div>

ご覧のとおり、msDropDownは選択ドロップダウンを変更し、順序付けされていないリストに変えています。.banner-main div には背景画像があり、ドロップダウンの選択に応じてその画像を変更したいと考えています。次の jQuery は、私の最初の最も単純な試みでしたが、うまくいきませんでした。

<script type="text/javascript">

  var pictureList = [
    'url(images/red.jpg)',
    'url(images/purple.jpg)', ];

  $(document).ready(function(){
    $('li.enabled._msddli_').click(function() {
      alert('clicked');
      var val = $('li.enabled._msddli_.selected').index();
      $('.banner-main').css('background-image', pictureList[val]);
    });
  });
</script>

その後、さらにいくつかのことを試しましたが、何らかの理由で、msDropDown によって生成されたどの要素でも .click() イベントがトリガーされていません。私はかなり困惑しているので、どんな助けでも大歓迎です！

4

1 に答える 1

0 
$('#banner-pic_child').on('click', '.li.enabled._msddli_', function (event) {
      alert('clicked');
      var val = $('li.enabled._msddli_.selected').index();
      $('.banner-main').css('background-image', pictureList[val]);
    });

問題を解決しますか?

于 2015-06-25T08:51:14.203 に答える