Question

很抱歉用这个来破坏SO社区，但我必须继续我的生活：有一个可能无限的可点击图像列表（将来会扩展），点击这些图像最多可以填满两个单独元素中的斑点。下一步不仅是填充下一个未填充的元素，而且如果他们再次从列表中选择，那么它将返回到现场1，替换旧图像。我无法想出应用正确的逻辑来实现这一目标的方法。这是我到目前为止所拥有的。

<div class="spot-1"></div><!--start here -->
<div class="spot-2"></div><!--then here -->

<div class="img-wrap">
<div><img class="PutinSpot"src="someIMG0.jpg" alt="dufuq?"></div>
<div><img class="PutinSpot"src="someIMG1.jpg" alt="dufuq?"></div>
<div><img class="PutinSpot"src="someIMG2.jpg" alt="dufuq?"></div>
<div><img class="PutinSpot"src="someIMG3.jpg" alt="dufuq?"></div>
<div><img class="PutinSpot"src="someIMG4.jpg" alt="dufuq?"></div>
</div><!--potentially^^^^^ infinite list-->

这是Jquery。

    $(document).ready(function () {
    $('.PutinSpot').click(function(){
    var CloneBadge = $(this).clone()        
    $(CloneBadge).appendTo('.spot-1').addClass('occupado');
    if ($('.spot-1 div').find('> img').length) {
      $(this).appendTo('.spot-2');
    } 
    });
    });

澄清。该列表需要能够无限增长。但是我希望它将img-wrap div中的一个点击图像放入spot-1，然后下一个图像点击到spot-2，一旦完整，让它检查它们是否已满，如果是，则追加到点 - 再次1。这会是一个循环吗？开关盒？

Answer 1

当编程尝试考虑数据如何流动时。操纵DOM以实现最终行为是次要问题。假设我正确理解了这个要求，让我们以这种方式重新解释你的问题：

有一个可变大小的图像列表，用户可以从中选择最多只有两个。当前选择的图像将以2显示分开的地方

在已经存在于DOM中的图像的上下文中，此问题的解决方案如下所示：

＆＃13;

class Contact extends React.Component {
          constructor() {
            super();
            this.state = {
              arr: [],
              inner_key:[],
              Address:'',
              printabledata:[],
              singledata:{}
            };
            self = this;
              this.printAllRecord = this.printAllRecord.bind(this);
            
          }

          componentWillMount() {  
          var formdata2 = firebase.database().ref("vishal-aaede/");
            formdata2.on("value", function (snap) {
                data = snap.val();
                self.setState({arr: data});
            });
          }

          componentDidUpdate(){
          var data=this.state.arr,
          headerArray=[];
          for (var key in data){
          headerArray.push(key);
          }console.log(headerArray);

           headerArray.forEach(function(val){
            self.printAllRecord(data[val])
            console.log(data[val].Name);
           } );
           self.state.singledata=data[headerArray[0]]
               ;       
          }
          printAllRecord(param,index){         
        self.state.printabledata.push(<tr>
        <td>{param.Name}</td>
        <td>{param.Round}</td>
        <td>{param.Email}</td>
        <td>{param.Date}</td>
        <td>{param.Phone}</td>
        <td>{param.Address}</td>
        <td>{param.Fresher}</td>
        <td>{param.Time}</td>
        </tr>);     
      }
           render() {
               return (
                 <div>
                   <h2>Candidate RECORD Coming Soon!!!!</h2>
                   <p>Write Filter Code here
                   </p>
                   <div>
                      <div className="row">
                        <div className="col-sm-2"></div>
                        <div className="col-sm-8">
                          <div className = "container-fluid table-responsive">            
                            <table className = "table table-bordered">
                              <thead>
                                <tr>
                                 <th>Name</th>
                                 <th>Interview Round</th>
                                 <th>Email</th>
                                 <th>Date</th>
                                 <th>Phone Number</th>
                                 <th>Address</th>
                                 <th>Gender</th>  
                                 <th>Experience</th>
                                 <th>Time</th>
                               </tr>
                              </thead>
                             <tbody>
                              {this.state.printabledata}
                              
                             </tbody>
                          </table>
                        </div>
                      </div>
                    <div className="col-sm-2"></div>
                    </div>
                  </div>
                </div>
               )
             }
            }

＆＃13;

$(document).ready(function() {
  $('.PutinSpot').click(function() {
    selectImage(this);
  });
});

var selectedImages = [];

function selectImage(imageEl) {
  // Remove an element from the front of the array if length is 2
  // This way the array will allways have 2 elements maximum
  if (selectedImages.length == 2) selectedImages.shift();

  selectedImages.push(imageEl);

  // For each selected image, find the correct div and
  // replace the content completely with the correct image
  selectedImages.forEach(function(img, i) {
    var targetDiv = $('.spot-' + (i + 1));
    targetDiv.html($(img).clone());
  });
}

＆＃13;

克隆然后附加可能无限列表中的元素

1 个答案: