How to convert JavaScript code to jQuery?

问题

symbolen.parent = object;
object.element.onclick = function() {
  this.parent.position.x = 0;
  this.parent.position.y = 0;
  this.parent.position.z = 0;
  this.parent.scale.x = 4,
  this.parent.scale.y = 4;
};

i want to convert the javascript code to jquery. Because i want to use "siblings". how can i change it ? is there any website for that?

for example i tried this code with scale first , there is no error message, but it is not working...

$('object').click(function(event) {
  $(this).parent().css('scale', '4');                                                                
  $(this).parent().siblings().css('scale', '0');
  event.preventDefault();
});

回答1:

You can wrap element(s) in a jQuery object with $(element). Then you can do any jQuery functionality with it. I changed 'object' selector into object.element. You don't use quotes here because you use the element in the variable directly instead of using a selector. Also scale is not a css attribute so i assume you mean transform: scale()

//Mimic your object.element
var object = {};
object.element = document.getElementsByClassName('scale');

//Add on click handler and set scale on click.
$(object.element).click(function() {
  $(this).css("transform", "scale(4, 4)");
  $(this).siblings().css("transform", "scale(1)");
});

div#parent {
  text-align: center;
}

div#scale {
  width: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
  <br>
  <div class="scale">Scale on click</div>
  <br>
  <br>
  <br>
  <div class="scale">Scale on click</div>
  <br>
</div>

回答2:

I need to change my vanilla JS parts of code to full jQuery. I am not sure what should I change? Anyone can help?

THX

My JS code


var slideOne = ["assets/slider-image-7.jpg", "assets/slider-image-6.jpg", "assets/slider-image-9.jpg", "assets/slider-image-8.jpg", "assets/slider-image-5.jpg"];
var slideTwo = ["assets/slider-image-4.jpg", "assets/slider-image-1.jpg", "assets/slider-image-2.jpg", "assets/slider-image-3.jpg"];
var firstSlide = document.querySelector(".first");
var secondSlide = document.querySelector(".second");

function rowOne() {
  for (var i = 0; i < slideOne.length; i++) {
    var picture = document.createElement("li");
    picture.classList.add("picture");
    picture.innerHTML = '<img src="' + slideOne[i] + '"/>';
    firstSlide.appendChild(picture);
  }
}

function rowTwo() {
  for (var i = 0; i < slideTwo.length; i++) {
    var picture = document.createElement("li");
    picture.classList.add("picture");
    picture.innerHTML = '<img src="' + slideTwo[i] + '"/>';
    secondSlide.appendChild(picture);
  }
} 

// Scrooling pictures in infinite carusel. Left or right

function moveLeftFirst() {
  $("ul.first > li:last-child").remove().prependTo(".first");
}

function moveRightFirst() {
  $("ul.first > li:first-child").remove().appendTo(".first");
}

function moveLeftSecond() {
  $("ul.second > li:last-child").remove().prependTo(".second");
}

function moveRightSecond() {
  $("ul.second > li:first-child").remove().appendTo(".second");
}

$(".previous").click(function () {
  moveLeftFirst();
  moveLeftSecond();
});

$(".next").click(function () {
  moveRightFirst();
  moveRightSecond();
});

rowOne();
rowTwo();

来源：https://stackoverflow.com/questions/52870011/how-to-convert-javascript-code-to-jquery

标签

javascript

jquery

onclick

click

converters