Почему переключение класса просто работает частично для нескольких элементов и не всегда одинаково? - PullRequest
Новая
       25

Почему переключение класса просто работает частично для нескольких элементов и не всегда одинаково?

1 голос
/ 11 января 2012

Я попытался реализовать список выбора, такой как в primeFaces с jQuery и jQuery-ui.

Чтобы объединить множественный выбор и сортировку, у меня есть функция, которая переключает класс onClick и позволяетпользователь может выбрать несколько элементов с помощью ctrl-Button.

Сортировка, выбор и перемещение между списками работает нормально, но теперь я должен реализовать ту же функциональность, что и при перетаскивании с помощью кнопок.

Теперь моя проблема в том, что если я, например, подниму предмет (с помощью кнопки!), Переключение больше не будет работать или только частично.

Кто-нибудь может мне помочь?

Я создал скрипку для этого, но функции для кнопок не вызывались, и я не знаю почему.

http://jsfiddle.net/p59vJ/14/ Редактировать:

скрипка с меньшим количеством кода: http://jsfiddle.net/p59vJ/15/

Мой код:

Javascript / jQuery: 

  var selectedList = new Array();
  var selectedChoice = new Array();
  var selected = new Array();

  jQuery(function() {
      jQuery('#liste, #auswahl').sortable({
          connectWith:".ui-picklist-list",
      });

      jQuery('#liste, #auswahl').children().click( function (eventObject){
          if(!eventObject.ctrlKey) {
              jQuery(".ui-picklist-item").removeClass("ui-state-highlight");
          }
          jQuery(this).toggleClass("ui-state-highlight");
      });

  });

  function initMultiselect(){
      jQuery('#liste, #auswahl').children().click( function (eventObject){
          if(!eventObject.ctrlKey) {
              jQuery(".ui-picklist-item").removeClass("ui-state-highlight");
          }
          jQuery(this).toggleClass("ui-state-highlight");
      });
  }

  function hasClass(element, cls) {
      var r = new RegExp('\\b' + cls + '\\b');
      return r.test(element.className);
  }



  function moveUp(id){
      for(var i=1; i<document.getElementById(id).getElementsByTagName("li").length; i++){
          if(hasClass(document.getElementById(id).getElementsByTagName("li")[i],"ui-state-highlight")){
              var e1 = document.getElementById(id).getElementsByTagName("li")[i];
              var e2 = document.getElementById(id).getElementsByTagName("li")[i-1];

              if(e1 && e2) { //nodes found
                  var parent = e1. parentNode;
                  var clones = [
                   e1. cloneNode(true),
                   e2. cloneNode(true)
                  ];
              //toggle (replace nodes)
              parent. replaceChild(clones[1], e1);
              parent. replaceChild(clones[0], e2);
              }
          }
      }

      jQuery('#'+id).children().click( function (eventObject){
          if(!eventObject.ctrlKey) {
            jQuery(".ui-picklist-item").removeClass("ui-state-highlight");
          }
          jQuery(this).toggleClass("ui-state-highlight");
      });    
  }

HTML-код: 

     <table id="j_idt14:j_idt19" class="ui-picklist ui-widget">
       <tbody>
          <tr>
            <td class="ui-picklist-source-controls">
                <button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-picklist-button-move-up" title="Move Up" type="button" onClick="moveUp('liste');">
                <span class="ui-button-icon-left ui-icon ui-icon ui-icon-arrow-1-n"></span>
                <span class="ui-button-text">moveUp</span>
                </button>
            </td>
            <td>
              <div class="ui-picklist-caption ui-widget-header ui-corner-tl ui-corner-tr">Liste</div>
                <ul class="ui-widget-content ui-picklist-list ui-picklist-source ui-corner-bottom" id="liste">
                  <li class="ui-picklist-item" id="pick1">Messi - 10</li>
                  <li class="ui-picklist-item" id="pick2">Iniesta - 8</li>
                  <li class="ui-picklist-item" id="pick3">Villa - 7</li>
                  <li class="ui-picklist-item" id="pick4">Alves - 2</li>
                  <li class="ui-picklist-item" id="pick5">Xavi - 6</li>
                  <li class="ui-picklist-item" id="pick6">Puyol - 5</li>
                </ul>
     </td>
       <td>
      </td>
       <td>
          <div class="ui-picklist-caption ui-widget-header ui-corner-tl ui-corner-tr">Auswahl</div>
           <ul class="ui-widget-content ui-picklist-list ui-picklist-target ui-corner-bottom " id="auswahl">
           <li class="ui-picklist-item " id="choice1">Element 1</li>
            <li class="ui-picklist-item " id="choice2">Element 2</li>
              <li class="ui-picklist-item " id="choice3">Element 3</li>
             <li class="ui-picklist-item " id="choice4">Element 4</li>
          <li class="ui-picklist-item" id="choice5">Element 5</li>
          <li class="ui-picklist-item " id="choice6">Element 6</li>
          <li class="ui-picklist-item " id="choice7">Element 7</li>
          <li class="ui-picklist-item " id="choice8">Element 8</li>

           </ul>
        </td>
        <td class="ui-picklist-target-controls">
           <button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-picklist-button-move-up" title="Move Up" type="button" onClick="moveUp('auswahl')">
          <span class="ui-button-icon-left ui-icon ui-icon ui-icon-arrow-1-n"></span>
           <span class="ui-button-text">moveUp</span>
          </button>
        </td>
       </tr>
     </tbody>
   </table>

CSS: 

.ui-picklist .ui-picklist-list {
height: 200px;
list-style-type: none;
margin: 0;
overflow: auto;
padding: 0;
width: 200px;
}
.ui-picklist .ui-picklist-list li {
margin: 1px;
padding: 2px;
}
.ui-picklist .ui-button {
display: block;
margin-bottom: 0.3em;
margin-left:0.4em;
background: transparent url(../dsv_assets/images/datepicker_button.PNG) no-repeat;
border:none;
}
.ui-picklist .ui-picklist-item {
border: 0 none;
cursor: pointer;
font-weight: inherit;
}
.ui-picklist .ui-picklist-caption {
border-bottom: 1 none;
padding: 4px 10px;
text-align: center;
}
.ui-picklist table {
border-collapse: collapse;
width: 100%;
}
.ui-picklist > tbody {
}

.ui-picklist-item div{
width: 20px;
float: right;
height: 13px;
}

.ui-picklist-caption{
color: black !important;
}

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header  .ui-state- highlight  {background: highlight; color: white;}

1 Ответ

1 голос
/ 12 января 2012

Хорошо, я нашел ошибку. Когда я клонирую элементы списка, чтобы переместить их вверх или вниз по списку или в другой список, событие щелчка теряется, поэтому я инициализировал его каждый раз после перемещения одного или нескольких элементов. Из-за этого некоторые элементы списка имели больше, чем функция щелчка, поэтому, когда я щелкал их, и у них было четное число событий щелчка, казалось, что событие щелчка не было запущено, потому что класс переключался и затем переключался в том же момент снова.

Проблема, по которой элементы не подсвечиваются, когда я перетаскиваю их, заключается в том, что событие щелчка вызывается только при нажатии кнопки мыши и освобождается не только при нажатии.

Решение: После перемещения одного или нескольких элементов списка я вызываю функцию, которая делает это: 

      jQuery([all my picklist items]).unbind('mousedown');
      jQuery([all my picklist items]).mousedown( function (eventObject){
           if(!eventObject.ctrlKey) {
              jQuery(".ui-picklist-item").removeClass("ui-state-highlight");
           }
           jQuery(this).toggleClass("ui-state-highlight");
      });
...