>

타임 라인에 CSS 그리드를 사용하고 있습니다. 그리드의 성능은 약 1300div이며, 이는 실제로 성능에 좋지 않습니다.

이러한 각 셀을 클릭 할 수 있어야하고 호버에서 다른 색상을 표시해야합니다. 1300 개의 div를 모두 렌더링하지 않으면 "빈"노드의 스타일을 지정하거나 상호 작용할 방법을 찾을 수 없습니다.

무엇을 할 수 있나요?


  • 답변 # 1

    마이크 'Pomax'Kamermans  가장 좋은 방법은 마우스 클릭을 감지하고 항목을 동적으로 추가하는 것입니다. item_width 에 값을 지정하여 항목의 너비와 높이를 사용자 정의 할 수 있습니다  그리고 item_height .

    var item_width=40;
    var item_height=40;
    var added_items=[];
    $(function(){
          $('.grid').on('click', function(e){
          var x = e.pageX - $(this).offset().left;
          var y = e.pageY - $(this).offset().top; 
          var item=$('<div class="item"></div>');
          var left=Math.floor(x/item_width)*item_width;
          var top=Math.floor(y/item_height)*item_height;
          var position={ 'left':left, 'top':top };
          var index=added_items.findIndex(p => p.left == position.left && p.top == position.top);
          if(index<0){
          added_items.push(position);
          item.css('left', left);
          item.css('top', top);
          item.css('background', "#"+((1<<24)*Math.random()|0).toString(16))
          item.appendTo($('.grid'));
          }
        });
      
    });
    
    
    .grid {
      
      width:400px;
      height:400px;
      border:1px solid red;
        position:relative;
      margin:10px;
    }
    .item {
      width:40px;
      height:40px;
      position:absolute;
      background:red;  
    }
    .item:hover { 
    }
    
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="grid"> </div>
    
    

  • 답변 # 2

    열 클래스를 eventHandler로 추가 할 수 있으며 동일한 클래스가 동일한 호버 또는 클릭으로 작동합니다. 또한 1300 div는 실제로 페이지 성능을 저하시킵니다. 이를 위해 무한 스크롤이나 그와 비슷한 방법을 연구 할 수 있습니다.

    https://demos.telerik.com/kendo-ui/grid/endless-scrolling-local

  • 이전 python - numpy의 정사각형과 입방체를 가져 와서 추가
  • 다음 고유 포인터를 딥 카피하려고 할 때 C ++ 메모리 액세스 위반