Изменить положение изображения с помощью переменных + кнопок

Question

Я пытаюсь изменить положение квадрата (изображения-заполнители) на основе переменной, которую я хотел бы изменить при нажатии правой и левой кнопок. Я не уверен, что я сделал неправильно, даже кнопка отладки, чтобы показать мне, если переменная меняется, будет работать. Код ниже (Идентификатор, если CSS действительно нужен, но я все равно его добавил).

edit: Вот ссылка на код https://codepen.io/linelessmail/pen/yLNpGve

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="left" class="button" style="font-size :40px;height:100px;width:300px">Left</button>
<button id="right" class="button" style="font-size : 40px;height:100px;width:300px">Right</button> 
<button onClick="test()">DEBUG</button>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Blended_colour_wheel.svg/300px-Blended_colour_wheel.svg.png" alt="Wheel" width="800"height="800" id="wheel">


<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Square_-_black_simple.svg/1200px-Square_-_black_simple.svg.png" alt="square" width="200"height="200" id="square">

CSS:

#right {
    position:absolute;
    top: 60px;
    left: 1000px;
}

#left {
    position:absolute;
    top: 240px;
    left: 1000px;
}

#wheel {
    position:absolute;
    top: 50px;
    left: 50px;
    transform-origin: centre;
}

#square {
    position:absolute;
    top: 400px;
    left: 1000px;
    transform-origin: centre;
}

Javascript:

$(document).ready(function() {
  var deg = 0;
  var position = 1;

  $(".button").on("click", function() {
    if ($(this).is("#left")) {
      deg = deg - 32.7272727273;
      var position = position - 1;
      if (position == 1) {
square.style.marginLeft = '1000px';
square.style.marginLeft = '400px';
}
if (position == 2) {
square.style.marginLeft = '1300px';
square.style.marginLeft = '400px';
} 
if (position == 3) {
square.style.marginLeft = '1000px';
square.style.marginLeft = '600px';
} 
if (position == 4) {
square.style.marginLeft = '1300px';
square.style.marginLeft = '600px';
} 
if (position == 5) {
var position = 1
} 
    } else {
      deg = deg + 32.7272727273;
      var position = position + 1;
      if (position == 1) {
square.style.marginLeft = '1000px';
square.style.marginLeft = '400px';
}
if (position == 2) {
square.style.marginLeft = '1300px';
square.style.marginLeft = '400px';
} 
if (position == 3) {
square.style.marginLeft = '1000px';
square.style.marginLeft = '600px';
} 
if (position == 4) {
square.style.marginLeft = '1300px';
square.style.marginLeft = '600px';
} 
if (position == 5) {
var position = 1
} 
    }

    $("#wheel").css({
      "-webkit-transform": "rotate(" + deg + "deg)",
      "-moz-transform": "rotate(" + deg + "deg)",
      "-ms-animation:": "rotate(" + deg + "deg)",
      "-o-animation": "rotate(" + deg + "deg)",
      transform: "rotate(" + deg + "deg)"

    });

    function test(click){
    alert("Position variable is " + position);
}
  });
});

Answer 1

Если я не понял проблему, я думаю, вы смешиваете javascript с jquery. функция onclick от javascript, и вы добавляете ее, как если бы она была jquery, с другой стороны, у вас было много переменных позиции, которые я передал в глобальную область действия

Не удается найти тестовую функцию, поскольку это внутри jquery У меня есть sadaco, и он работает правильно Надеюсь, что это может помочь вам

var position = 1;
$(document).ready(function() {
  var deg = 0;
  

  $(".button").on("click", function() {
    if ($(this).is("#left")) {
      deg = deg - 32.7272727273;
      position = position - 1;
      if (position == 1) {
square.style.marginLeft = '1000px';
square.style.marginLeft = '400px';
}
if (position == 2) {
square.style.marginLeft = '1300px';
square.style.marginLeft = '400px';
} 
if (position == 3) {
square.style.marginLeft = '1000px';
square.style.marginLeft = '600px';
} 
if (position == 4) {
square.style.marginLeft = '1300px';
square.style.marginLeft = '600px';
} 
if (position == 5) {
position = 1
} 
    } else {
      deg = deg + 32.7272727273;
      position = position + 1;
      if (position == 1) {
square.style.marginLeft = '1000px';
square.style.marginLeft = '400px';
}
if (position == 2) {
square.style.marginLeft = '1300px';
square.style.marginLeft = '400px';
} 
if (position == 3) {
square.style.marginLeft = '1000px';
square.style.marginLeft = '600px';
} 
if (position == 4) {
square.style.marginLeft = '1300px';
square.style.marginLeft = '600px';
} 
if (position == 5) {
position = 1
} 
    }
    
    $("#wheel").css({
      "-webkit-transform": "rotate(" + deg + "deg)",
      "-moz-transform": "rotate(" + deg + "deg)",
      "-ms-animation:": "rotate(" + deg + "deg)",
      "-o-animation": "rotate(" + deg + "deg)",
      transform: "rotate(" + deg + "deg)"
      
    });
    

  });
});
    function test(click){
    alert("Position variable is " + position);
}

#right {
    position:absolute;
    top: 60px;
    left: 1000px;
}

#left {
    position:absolute;
    top: 240px;
    left: 1000px;
}

#wheel {
    position:absolute;
    top: 50px;
    left: 50px;
    transform-origin: centre;
}

#square {
    position:absolute;
    top: 400px;
    left: 1000px;
    transform-origin: centre;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="left" class="button" style="font-size :40px;height:100px;width:300px">Left</button>
<button id="right" class="button" style="font-size : 40px;height:100px;width:300px">Right</button> 
<button onClick="test()">DEBUG</button>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Blended_colour_wheel.svg/300px-Blended_colour_wheel.svg.png" alt="Wheel" width="800"height="800" id="wheel">


<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Square_-_black_simple.svg/1200px-Square_-_black_simple.svg.png" alt="square" width="200"height="200" id="square">