0

選択可能な jQuery UI の 2 つのインスタンスを読み込もうとしていますが、2 つ目のインスタンスに問題があるようです。どうすればこれを解決できますか?

ここに私のコードがあります: http://jsfiddle.net/3pKQf/1/

HTML

Div 1
<div id="div1">
        <ul id="selectable">
          <li class="ui-state-default">1</li>
          <li class="ui-state-default">2</li>
          <li class="ui-state-default">3</li>
          <li class="ui-state-default">4</li>
          <li class="ui-state-default">5</li>
          <li class="ui-state-default">6</li>
          <li class="ui-state-default">7</li>
          <li class="ui-state-default">8</li>
          <li class="ui-state-default">9</li>
          <li class="ui-state-default">10</li>
          <li class="ui-state-default">11</li>
          <li class="ui-state-default">12</li>
          <li class="ui-state-default">13</li>
          <li class="ui-state-default">14</li>
          <li class="ui-state-default">15</li>
        </ul>
</div><br><br>
Div 2
    <div id="div2">
            <ul id="selectable">
              <li class="ui-state-default">1</li>
              <li class="ui-state-default">2</li>
              <li class="ui-state-default">3</li>
              <li class="ui-state-default">4</li>
              <li class="ui-state-default">5</li>
              <li class="ui-state-default">6</li>
              <li class="ui-state-default">7</li>
              <li class="ui-state-default">8</li>
              <li class="ui-state-default">9</li>
              <li class="ui-state-default">10</li>
              <li class="ui-state-default">11</li>
              <li class="ui-state-default">12</li>
              <li class="ui-state-default">13</li>
              <li class="ui-state-default">14</li>
              <li class="ui-state-default">15</li>
            </ul>
            </div>
​

CSS

#selectable .ui-selecting {
    background: #C41C7B;
}
#selectable .ui-selected {
    background: #C41C7B;
    color: white;
}
#selectable {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 450px;
}
#selectable li {
    margin: 0px;
    padding: 3px;
    float: left;
    width: 16px;
    height: 16px;
    font-size: 10px;
    font-family: Arial;
    text-align: center;
}
​

JavaScript

$(function() {
    $("#selectable").bind('mousedown', function (e) {
        e.metaKey = true;
    }).selectable();
});
4

1 に答える 1

1

それらには異なる ID が必要です。どちらも#selectableです。

class を使用した作業中の更新を次に示し.selectableます。http://jsfiddle.net/3pKQf/4/

于 2012-11-10T20:13:59.767 に答える