Question

我从pokeapi.co下载数据并动态添加到表中。有一些统计数据和图像。我希望该图像在悬停时旋转。（我在创建表时动态添加了一个id =“pokeImage”。）我试图在CSS中这样做：

$('#pokeImage').on('click', function () { 
$(this).css({ 
    transform: 'rotate(' + (Math.random()*45+45).toFixed(3) + 'deg)'
});

并在jQuery中：

$('#getPokemons').click(function(){
var table = document.createElement('table');
        table.className = "table table-condensed";
        table.setAttribute("id", "ajaxTable");

        var header = document.createElement('tr');
        header.innerHTML = '<th> Name </th><th> Image </th><th> HP </th>';
        header.setAttribute("id", "tableHeader");
        table.appendChild(header);

var random = Math.floor(Math.random()*100);
for(var i = random ; i <= random + 10; i++){
$.ajax({
    type: "GET",
    url: "http://pokeapi.co/api/v2/pokemon/"+i+"/",
    dataType: 'json',
    success: function(response){
        var name = response.forms[0].name;
        var imgUrl = response.sprites.front_default;
        var hpName = response.stats[5].stat.name ; 
        var hpVal= response.stats[5].base_stat;

        var row = document.createElement('tr');
        row.innerHTML = '<td>' + name + '</td>' + '<td>' + '<img id="pokeImage" src ="'+imgUrl+'"/>' + '</td>' + '<td>' + hpVal + '</td>';
        $('#pokedex1').append(row);

    }
});}    $('#pokedex1').append(table);});

但它没有用。你有什么建议怎么做？谢谢

编辑这是我获取数据的方式，将其放在表格中并显示它

<style>
      select>option{ 
                   height:20px;
                 }
</style>

Answer 1

请参阅以下代码段，了解其处理鼠标悬停事件

＆＃13;

$('#pokeImage').on('mouseover', function () { 
   $(this).css({ 
      transform: 'rotate(' + (Math.random()*45+45).toFixed(3) + 'deg)'
   }); 
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="pokeImage" src= "http://images.indianexpress.com/2017/06/oneplus5_final_image.jpg">

＆＃13;

更新了代码段

＆＃13;

<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="getPokemons" value="submit">Click</button>
<div id="pokedex1"></div>
<script>
$('#getPokemons').click(function(){
	var table = document.createElement('table');
	table.className = "table table-condensed";
	table.setAttribute("id", "ajaxTable");

	var header = document.createElement('tr');
	header.innerHTML = '<th> Name </th><th> Image </th><th> HP </th>';
	header.setAttribute("id", "tableHeader");
	table.appendChild(header);

	var random = Math.floor(Math.random()*100);
	for(var i = random ; i <= random + 10; i++){
		$.ajax({
			type: "GET",
			url: "https://pokeapi.co/api/v2/pokemon/"+i+"/",
			dataType: 'json',
			success: function(response){
				var name = response.forms[0].name;
				var imgUrl = response.sprites.front_default;
				var hpName = response.stats[5].stat.name ; 
				var hpVal= response.stats[5].base_stat;

				var row = document.createElement('tr');
				row.innerHTML = '<td>' + name + '</td>' + '<td>' + '<img id="pokeImage" src ="'+imgUrl+'" onmouseover = "rotateImage(event)"/>' + '</td>' + '<td>' + hpVal + '</td>';
				$('#pokedex1').append(row);
			}
		});
	}    
	$('#pokedex1').append(table);
});
function rotateImage(event) {
	$(event.target).css('transform', 'rotate(' +  (Math.random()*45+45).toFixed(3) + 'deg)');
}
</script>
</html>

＆＃13;

添加了mouseout事件

＆＃13;

<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="getPokemons" value="submit">Click</button>
<div id="pokedex1"></div>
<script>
$('#getPokemons').click(function(){
	var table = document.createElement('table');
	table.className = "table table-condensed";
	table.setAttribute("id", "ajaxTable");

	var header = document.createElement('tr');
	header.innerHTML = '<th> Name </th><th> Image </th><th> HP </th>';
	header.setAttribute("id", "tableHeader");
	table.appendChild(header);

	var random = Math.floor(Math.random()*100);
	for(var i = random ; i <= random + 10; i++){
		$.ajax({
			type: "GET",
			url: "https://pokeapi.co/api/v2/pokemon/"+i+"/",
			dataType: 'json',
			success: function(response){
				var name = response.forms[0].name;
				var imgUrl = response.sprites.front_default;
				var hpName = response.stats[5].stat.name ; 
				var hpVal= response.stats[5].base_stat;

				var row = document.createElement('tr');
				row.innerHTML = '<td>' + name + '</td>' + '<td>' + '<img id="pokeImage" src ="'+imgUrl+'" />' + '</td>' + '<td>' + hpVal + '</td>';
				$(document).on("mouseover", "#pokeImage", rotateImage);
				$(document).on("mouseout", "#pokeImage", reRotateImage);
				$('#pokedex1').append(row);
			}
		});
	}    
	$('#pokedex1').append(table);
});
function rotateImage(event) {
	$(event.target).css('transform', 'rotate(' + 355 + 'deg)');
}
function reRotateImage(event) {
	$(event.target).css('transform', 'rotate(' + 0 + 'deg)');
}
</script>
</html>

＆＃13;

Answer 2

也许这个例子会有所帮助。即使没有js旋转也能正常工作。

.someImage {
  width: 100px;
  height: 100px;
  background-color: blue;
}

.someImage:hover {
  transform: rotate(45deg);
}

<div class="someImage"></div>

Answer 3

您使用的是.css选择器的错误语法。它是.css( propertyName, value )，如documentation

中所述

在您的情况下，您应该使用。

$(this).css('transform', 'rotate(' + (Math.random()*45+45).toFixed(3) + 'deg)'));

有关工作示例，请参阅下面的代码段。

$('#pokeImage').on('mouseover', function () { 
  $(this).css('transform', 'rotate(' +  (Math.random()*45+45).toFixed(3) + 'deg)');
}); 

// Optionally, to rotate it back when not hovering
$('#pokeImage').on('mouseout', function () { 
  $(this).css(
    'transform', 'rotate(0deg)');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="pokeImage" src="http://placehold.it/100x70">

此外，如果动态添加元素（如通过AJAX请求），您还需要动态添加事件处理程序。试试这个：

 /* ... */

var row = document.createElement('tr');
row.innerHTML = '<td>' + name + '</td>' + '<td>' + '<img id="pokeImage" src ="'+imgUrl+'"/>' + '</td>' + '<td>' + hpVal + '</td>';

$(row).on('mouseout', function () { 
  $(this).css(
    'transform', 'rotate(0deg)');
});

$('#pokedex1').append(row);

/* ... */

在悬停/鼠标悬停时旋转从api下载的图像

3 个答案: