Question

我的代码中包含一些项目列表，列表中的每个项目都有一个与该项目对应的按钮。单击按钮时，变量rotation将加1。这有效！但只有一次？每次用户点击它时，它必须加1，而不只是一次。同时，它还将信息保存在数据库中，因此我使用AJAX来实现这一点。

我想要显示的第一个代码是在PHP文件中，如下所示：

foreach($finalArray as $arr){
    echo '<li id="item-' . $arr['number'] . '" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>' . $arr['name'] . ' 
    <img class="rotate" id="img_'.$arr['number'].'" src="images/house/other/settings.jpg" onclick="rotateObject(this,\''. $arr['src']. '\', \''. $arr['rotation']. '\')">'; 
}

我在这里解析了值rotation，以及我们不会进一步研究的src变量。在更新数据库的AJAX调用中，我希望它也加上1的旋转。到目前为止我有这个AJAX代码：

function rotateObject(e, src, rotation)
{
// Some irrelevant code...
var img_algo = 1;
var img_rotation = parseInt(rotation, 10) + img_algo;


xmlhttp.onreadystatechange=function(){
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            //Changing the current src from whatever it is, to the src that corresponds to the button clicked on.
            var getEle = document.getElementsByClassName('item' + img_id)[0];
            var imagePath = img_rotation + ".png";
            getEle.src = imagePath + xmlhttp.responseText;
        }
    }

正如我所说，当用户第一次点击按钮时，值加上1，而不是第二次。关于它可能是什么的任何建议？提前谢谢。

编辑：

其实我觉得它会更新？它只是不知道如何多次加上变量，当我调试代码时，它只是更新旋转并在每次单击按钮时将其设置为相同的值，而不是用一个来填充它？嗯

现状：

<img class="rotate" id="img_'.$arr['number'].'" src="images/house/other/settings.jpg"  rel="'.$arr['rotation'].'" onclick="rotateObject(this,\''. $arr['src']. '\')">';

var img_algo = 1;
var rotation = document.getElementsByClassName('item' + img_id)[0].getAttribute('rel');
var img_rotation = parseInt(rotation, 10) + img_algo;

返回NaN

原因可能是rel="'.$arr['rotation'].是＆＃34;未定义＆＃34;。它表示单击按钮时。

更新的当前状态：

    <img class="rotate" id="img_'.$arr['number'].'" src="images/house/other/settings.jpg"  rel="'.$arr['rotation'].'" onclick="rotateObject(this,\''. $arr['src']. '\')">';

var img_algo = 1;
var rotation = document.getElementById('item' + img_id).getAttribute('rel');
var img_rotation = rotation + img_algo;
    document.getElementById('item-' + img_id).setAttribute("rel", img_rotation);

我发现var rotation = document.getElementsByClassName('item' + img_id)[0].getAttribute('rel');返回null

更新的当前状态：

Answer 1

//changes in your foreach loop

'<img class="rotate" id="img_'.$arr['number'].'" src="images/house/other/settings.jpg"  rel="'.$arr['rotation'].'" onclick="rotateObject(this,\''. $arr['src']. '\')">'

// changes in side you function

var img_algo = 1;

//------------please try this (not necessay to pass the 3rd argument this.rel)--------------//
var rotation = document.getElementsByClassName("theImgTagClass")[0].getAttribute('rel');

var img_rotation = parseInt(rotation, 10) + img_algo;
document.getElementById('IdOfImgTag').setAttribute("rel", img_rotation);

Answer 2

我认为OnClick =＆＃34; rotateObject（）＆＃34;在这个函数中，每次不更新的第三个参数值。这就是为什么每次你点击它通过相同的＆＃39;旋转＆＃39;值，每次增加但结果相同。

我建议使用额外的属性，例如rel =＆＃34; current_rotation_value＆＃34;。在你的rotateObject（e，src，rotation）函数中，从这个＆lt; rel;＆lt; s＆gt;中获取当前的旋转值。属性并在每次递增时更新它。

//changes in your foreach loop

'<img class="rotate" id="img_'.$arr['number'].'" src="images/house/other/settings.jpg"  rel="'.$arr['rotation'].'" onclick="rotateObject(this,\''. $arr['src']. '\',this.rel)">'

// changes in side you function

var img_algo = 1;
var img_rotation = parseInt(rotation, 10) + img_algo;
document.getElementById('IdOfImgTag').setAttribute("rel", img_rotation);

JS变量不会更新onclick

2 个答案: