Question

我必须以圆形的形状显示数组值，并且它必须永远在循环中运行。逆时针旋转圆圈时工作正常。但是当我们向相反的方向移动圆圈时会出现问题。

我的车轮上有一个活动元素。因此，当您用户点击任何其他幻灯片然后激活它时，计算点击幻灯片和活动幻灯片之间的差异，然后相应地添加和删除轮中的项目。

所以基本上它从Array中选择值。如果顺时针移动圆圈，它会从数组后面选取值，如果你逆时针移动它，它会开始从下一个可用值中获取值。如果在第一页加载中呈现11个项目，那么它将从12无索引开始获取值。

单击活动元素上方位置的项目然后再次逆时针旋转时会出现问题。

假设您单击项目号。 8然后单击第7项。在这种情况下，应该在车轮中加入第2号。

这是fiddle。

PrependedModule

Answer 1

我已通过以下代码解决了这个问题。

function getItemsFromBack(length) {
  var values = [];
  if (endPoint > numberOfElement.length) {
    var diff = endPoint - numberOfElement.length;
    values = numberOfElement.slice(diff - length, diff)
    endPoint = endPoint - length;
    return values.reverse();
  }
  endPoint = endPoint - length;
  if (endPoint < 0) {
    endPoint = numberOfElement.length - Math.abs(endPoint)
    var otherVal = 0;
    if (endPoint + length >= numberOfElement.length) {
      otherVal = (endPoint + length) - numberOfElement.length;
      values = numberOfElement.slice(endPoint, numberOfElement.length)
    }
    if (otherVal > 0) {
      values = values.concat(numberOfElement.slice(0, otherVal))
    }
  } else {
    values = numberOfElement.slice(endPoint, endPoint + length)
  }
  var valuesCount = values.length;
  return values.reverse();
}

我正在检查endPoint是否大于总数组长度。然后endPoint- Array.length并使用diff获取元素

Answer 2

您的CSS很棒，但您的JavaScript仍然存在错误。试试这个：

单击7，然后单击2

为了解决这个问题，我建议我们简化你的逻辑：

为商品提供有意义的ID ，以便我们轻松选择，比较它们并推断商品角度
不要使用硬编码数组（如果你这样做是因为像jslint这样的代码质量工具，请考虑让它容忍for loops）

您的代码的复杂性来自于1-30范围内的起点和终点的管理。现在，通过上面的第1点，这很容易。

我没有太多更改您的代码，因此您可以轻松识别您的工作部分：

// Global variables
var numberOfItems = 30,
    numberOfRenderedItems = 11,
    firstItem = 0
;

function generateHtml(){
    var html ='';
    for (var item = 0; item < numberOfRenderedItems; item++) {
        var angle = 18 * item,
            className = angle === 90? 'active':'';
        html +=
            '<div class="shapes '+className+'" data-item="'+item+'" data-deg="'+angle+'" style="--deg:'+angle+'deg;">'+
            ' <span class="set-pos">'+(item+1)+'</span>'+
            ' <span>'+angle+' deg </span>'+
            '</div>';
    }
    document.querySelector('#dynamic-html').innerHTML= html;
}

generateHtml();

$('#dynamic-html').on('click','.shapes',function(){

    // Set clicked item active
    $('.shapes').removeClass('active');
    $(this).addClass('active');

    var selectedItem = Number($(this).data('item')),
        previousActiveItem = firstItem + Math.floor(numberOfRenderedItems/2),
        diff = selectedItem - previousActiveItem,
        selectedAngle = selectedItem * 18,
        degrees = 90 - selectedAngle,
        isClockWise = diff < 0;

    // Rotate all items
    $('.circle').removeData('deg');
    $('.circle').css({'transform' : 'rotate('+ degrees +'deg)'}).attr('data-deg',degrees);

    var items;
    if (isClockWise)
        items = getItemsFromBack(diff);
    else
        items = getItemsFromFront(diff);

    // Remove items
    items.toRemove.forEach( function (item) {
        $(".shapes[data-item="+item+"]").remove();        
    });

    // Add items
    var newItems = items.toAdd.reduce( function (html, item) {
        // Get item number between 1 and max
        var itemNumber = getNumberInRange(item),
            angle = 18 * item;
        return html +
            '<div class="shapes" data-item="'+item+'" data-deg="'+angle+'" style="--deg:'+angle+'deg;">'+
            ' <span class="set-pos">'+itemNumber+'</span>'+
            ' <span>'+angle+' deg </span>'+
            '</div>';
    }, '');
    if (isClockWise)
        $('#dynamic-html').append(newItems);
    else
        $('#dynamic-html').prepend(newItems)

})

function getItemsFromBack (diff) {
    var items = {
        toAdd: [],
        toRemove: []
    };

    firstItem += diff;
    for (var i = 0; i < Math.abs(diff); i++) {
        items.toAdd.push(firstItem + i);
        items.toRemove.push(firstItem + i + numberOfRenderedItems);
    }

    return items;
}

function getItemsFromFront (diff) {
    var items = {
        toAdd: [],
        toRemove: []
    };

    for (var i = 0; i < Math.abs(diff); i++) {
        items.toAdd.push(firstItem + i + numberOfRenderedItems);
        items.toRemove.push(firstItem + i);
    }
    firstItem += diff;

    return items;
}

function getNumberInRange (item) {
    do {
        item = (item + numberOfItems) % numberOfItems;
    }
    while (item < 0);
    return item + 1;
}

更新后的JSFiddle链接

https://jsfiddle.net/dpvjtvjd/2/

Answer 3

我认为您的问题只是您的var endPoint = numberOfElement.length;初始化值。在您的代码中，您将其初始化为0这是错误的（我认为），它应该由var numberOfElement = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30]; var initialRender = numberOfElement.slice(0,11); var startPoint = initialRender.length; var endPoint = 0; /* here is the change */ function generateHtml(){ var html =''; initialRender.forEach(function(item,index){ var angle = 18 * (index); var className = angle === 90? 'active':''; html+='<div class="shapes '+className+'" data-deg="'+angle+'" style="--deg:'+angle+'deg;"> <span class="set-pos">'+(item)+'</span> <span> '+angle+' deg </span></div>'; }) document.querySelector('#dynamic-html').innerHTML= html; } generateHtml(); $('#dynamic-html').on('click','.shapes',function(){ var deg = 90; var activeDeg = $('.active').data('deg'); var needToremoveElement = activeDeg; var selectedElement = $(this).data('deg'); var degrees = deg - selectedElement; var diff = Math.abs((activeDeg - selectedElement) / 18); $('.shapes').removeClass('active'); $(this).addClass('active'); var movementCloseWise = degrees > ($('.circle').data('deg') || 0); $('.circle').removeData('deg'); $('.circle').css({'transform' : 'rotate('+ degrees +'deg)'}).attr('data-deg',degrees); if(movementCloseWise){ var itemLength = $('.shapes').length; $('.shapes:gt('+((itemLength-1)-diff)+')').remove() var newItems = generateItem(getItemsFromBack(diff), true); newItems = $(newItems).get().reverse(); $('#dynamic-html').prepend(newItems) startPoint -= diff; }else{ var newItems = generateItem(getItemFromStart(diff), false) $('#dynamic-html').append(newItems) $('.shapes:lt('+(diff)+')').remove() endPoint += diff; } }) function getItemsFromBack(length) { var values = []; endPoint = endPoint - length; if (endPoint < 0) { endPoint = numberOfElement.length - Math.abs(endPoint) var otherVal = 0; if (endPoint + length >= numberOfElement.length) { otherVal = (endPoint + length) - numberOfElement.length; values = numberOfElement.slice(endPoint, numberOfElement.length) } if (otherVal > 0) { values = values.concat(numberOfElement.slice(0, otherVal)) } } else { values = numberOfElement.slice(endPoint, endPoint + length) } var valuesCount = values.length; return values.reverse(); } function getItemFromStart(length) { var values = numberOfElement.slice(startPoint, startPoint + length); var valueCount = values.length; startPoint += valueCount; if (valueCount < length) { startPoint = 0; return values.concat( getItemFromStart(length - valueCount) ); } else if (startPoint >= numberOfElement.length) { startPoint = 0; } return values; } function generateItem (items, isClockWise){ var html = "", lastItemAngle; if(isClockWise){ lastItemAngle = $('#dynamic-html .shapes:first').data('deg'); } else{ lastItemAngle = $('#dynamic-html .shapes:last').data('deg'); } items.forEach(function(item,index){ if(isClockWise){ var angles = lastItemAngle - (18 * (index +1)) } else{ var angles = lastItemAngle + (18 * (index +1)) } html+='<div class="shapes" data-deg="'+(angles)+'" style="--deg:'+angles+'deg;"> <span class="set-pos">'+(item)+'</span> <span> '+angles+' deg </span></div>'; }); return html; }初始化;我改变它并且它起作用了：

.main{
    	display: flex;
    	justify-content: center;
    	align-items: center;
    	height: 500px;
    }
    .pos{
		height:150px;
		width:150px;
		position: relative;
    }
	.circle{
		background: red;
		height:150px;
		width:150px;
		border-radius: 50%;
		transition: transform 0.3s ease-in-out;
	}
	.shapes{
		position: absolute;
		top:calc(50% - 75px);
		left:calc(50% - 10px);
		width: 20px;
	    height: 150px;
	    transform: rotate(var(--deg)) translate(0, 160px); 
	    background: green;
	    text-align: center;
	}

	.fake-overlay{
    position: absolute;
    width: 203%;
    height: 320%;
    background: #fff;
    top: -160px;
    right: -148%;
    display: none
    
	}
	.active{
		background: red
	}
	.set-pos{
		position: absolute;
		bottom: 0
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  		<div class="pos">
	  		<div class="circle">
	  			<div id="dynamic-html"></div>
	  		</div>
	  		<div class="fake-overlay"></div>
  		</div>
  	</div>

public class Arr2DThreadAdd {
static int[ ] [ ] arr2D ={{10, 20, 30, 40}, {11, 12, 13, 14}, {12, 13, 14, 15}};
static int[ ] result = new int[3];

static class job extends Thread{
    int arr2Mindex;

    job(int index){
      arr2Mindex= index;     
   }
    public void run(){
       int i;
       int sum=0;


        for( i=0;i<4; ++i)
            sum = sum +arr2D[arr2Mindex][i];

        result[arr2Mindex]= sum;

    }
}


    public static void main(String[] args) {
        job[] obj = new job[3];
        for(int i=0; i<3; ++i){
            obj[i]= new job(i);
            obj[i].start();
            try{
                obj[i].join();
            }catch (Exception e) {
                  e.printStackTrace();
             }
        }
    String res="";

   for( int j= 0; j<3; ++j)
      res = result[j] + " ";
   JOptionPane.showMessageDialog(null, res);
    }

}

这是Jsfiddle

从Array获取正确的索引值

3 个答案: