JQuery没有根据条件显示元素

Question

我有以下代码：

function sendState(state_id){
                var hd_read = $("#hd_read").val();
                var hd_toread = $("#hd_toread").val();
                var hd_reading = $("#hd_reading").val();

                var val = 0;
                var baseurl = "img/";

                switch(state_id)
                {
                    case 1:
                        if (hd_read == "0"){
                            document.getElementById('hd_read').value = "1";
                            document.getElementById('hd_toread').value = "0";
                            document.getElementById('hd_reading').value = "0";

                        }else{
                            document.getElementById('hd_read').value = "0";
                            document.getElementById('hd_toread').value = "0";
                            document.getElementById('hd_reading').value = "0";

                        }
                    break;
                    case 2:
                        if (hd_reading == "0"){
                            document.getElementById('hd_reading').value = "1";
                            document.getElementById('hd_read').value = "0";
                            document.getElementById('hd_toread').value = "0";

                        }else{
                            document.getElementById('hd_read').value = "0";
                            document.getElementById('hd_toread').value = "0";
                            document.getElementById('hd_reading').value = "0";

                        }
                    break;
                    case 3:
                        if (hd_toread == "0"){
                            document.getElementById('hd_toread').value = "1";
                            document.getElementById('hd_read').value = "0";
                            document.getElementById('hd_reading').value = "0";

                        }else{
                            document.getElementById('hd_read').value = "0";
                            document.getElementById('hd_toread').value = "0";
                            document.getElementById('hd_reading').value = "0";

                        }
                    break;
                }

                hd_read = $("#hd_read").val();
                hd_toread = $("#hd_toread").val();
                hd_reading = $("#hd_reading").val();

                var parameters = {
                    "book" : <?php echo $id_book; ?>,
                    "state" : state_id,
                    "val" : val
                };
                $.ajax({
                    cache: false,
                    data:  parameters,
                    url:   'change_state.php',
                    type:  'post',
                    dataType: "html",
                    beforeSend: function (){
                    },
                    success: function (response){
                        if (hd_read == "1"){
                            $("#img_read1").css("display","none");
                            $("#img_read2").css("display","inline-block");
                        }else{
                            $("#img_read1").css("display","inline-block");
                            $("#img_read2").css("display","none");
                        }

                        if (hd_reading == "1"){
                            $("#img_reading1").css("display","none");
                            $("#img_reading2").css("display","inline-block");
                        }else{
                            $("#img_reading1").css("display","inline-block");
                            $("#img_reading2").css("display","none");
                        }

                        if (hd_toread == "1"){
                            $("#img_toread1").css("display","none");
                            $("#img_toread2").css("display","inline-block");
                        }else{
                            $("#img_toread1").css("display","inline-block");
                            $("#img_toread2").css("display","none");
                        }
                    }
                });
            }

此功能必须显示或隐藏您按下的项目（0表示关闭，1表示打开） 我不知道谁可能在代码中失败。我无法调试javascript函数“success”，但它正在运行，因为状态正在发生变化。 当我开始并且没有被按下时一切正常，但是当一个人已按下并且我按下另一个前一个项目时状态不会变为关闭。

有人可以帮助我吗？

感谢。

骨料：

<a onclick="sendState(1);" id="img_read1" title="Read"><img src="<?php if($state == 1){ echo "img/read_sel.png"; }else { echo "img/read.png"; } ?>" /></a>
<a onclick="sendState(1);" style="display:none;" id="img_read2"><img src="<?php if($state == 1){ echo "img/read.png"; }else { echo "img/read_sel.png"; } ?>" /></a>
<input id="hd_read" type="text" value="<?php if($state == 1){ echo "1"; }else { echo "0"; } ?>" style="display:none;">

<a onclick="sendState(2);" id="img_reading1" title="Reading"><img src="<?php if($state == 2){ echo "img/reading_sel.png"; }else { echo "img/reading.png"; } ?>" /></a>
<a onclick="sendState(2);" style="display:none;" id="img_reading2"><img src="<?php if($state == 2){ echo "img/reading.png"; }else { echo "img/reading_sel.png"; } ?>" /></a>
<input id="hd_reading" type="text" value="<?php if($state == 2){ echo "1"; }else { echo "0"; } ?>" style="display:none;">

<a onclick="sendState(3);" id="img_toread1" title="To read"><img src="<?php if($state == 3){ echo "img/toread_sel.png"; }else { echo "img/toread.png"; } ?>" /></a>
<a onclick="sendState(3);" style="display:none;" id="img_toread2"><img src="<?php if($state == 3){ echo "img/toread.png"; }else { echo "img/toread_sel.png"; } ?>" /></a>
<input id="hd_toread" type="text" value="<?php if($state == 3){ echo "1"; }else { echo "0"; } ?>" style="display:none;">

变量$ state来自数据库中的记录，该记录保持良好的值

Answer 1

我相信这至少可以帮助您缩短代码的第一部分。替换开始直到切换为：

var hd_read = $("#hd_read").val();
var hd_toread = $("#hd_toread").val();
var hd_reading = $("#hd_reading").val();

var val = 0;
var baseurl = "img/";

// Reset
$("#hd_read").val("0");
$("#hd_toread").val("0");
$("#hd_reading").val("0");

// Update
if (state_id == 1 && hd_read == "0")
    $('#hd_read').val("1");
else if (state_id == 2 && hd_reading == "0")
    $('hd_reading').val("1");
else if (state_id == 3 && hd_toread == "0")
    $('hd_toread').val("1");

这可能不是您问题的答案，但更容易阅读的代码可能会帮助您找到错误。

Answer 2

缩短你的代码，只使用jQuery（正如你在开始时计划的那样）。也许它会起作用：

更新：完全评论。

function sendState(state_id) {
    // If state_id = 1 and hd_read = 0, hd_read is now = 1, otherwise 0
    $("#hd_read").val(state_id == 1 && $("#hd_read").val() == 0 ? 1 : 0);    
    // If state_id = 2 and hd_reading = 0, hd_reading is now = 1, otherwise 0
    $("#hd_reading").val(state_id == 2 && $("#hd_reading").val() == 0 ? 1 : 0);
    // If state_id = 3 and hd_toread = 0, hd_toread is now = 1, otherwise 0
    $("#hd_toread").val(state_id == 3 && $("#hd_toread").val() == 0 ? 1 : 0);    

    // Never changes. Always = 0
    var val = 0;
    // Where is this variable being used?
    var baseurl = "img/";

    // Building up the parameters to send
    var parameters = {
        "book": <? php echo $id_book; ?> ,
            "state": state_id,
            "val": val
    };

    $.ajax({
        cache: false,
        data: parameters,
        url: 'change_state.php',
        type: 'post',
        dataType: 'html',
        success: function (response) {
            // If hd_read = 1 hide img_read1, otherwise show it
            $("#img_read1").css("display", $("#hd_read").val() == 1 ? "none" : "inline-block");
            // If hd_read = 0 hide img_read2, otherwise show it
            $("#img_read2").css("display", $("#hd_read").val() == 0 ? "none" : "inline-block");
            // If hd_readreading = 1 hide img_reading1, otherwise show it
            $("#img_reading1").css("display", $("#hd_reading").val() == 1 ? "none" : "inline-block");
            // If hd_readreading = 0 hide img_reading2, otherwise show it
            $("#img_reading2").css("display", $("#hd_reading").val() == 0 ? "none" : "inline-block");
            // If hd_toread = 1 hide img_toread1, otherwise show it
            $("#img_toread1").css("display", $("#hd_toread").val() == 1 ? "none" : "inline-block");
            // If hd_toread = 0 hide img_toread2, otherwise show it
            $("#img_toread2").css("display", $("#hd_toread").val() == 0 ? "none" : "inline-block");
        },
        error: function() {
            // Show any error on the console
            console.log('An error has occurred!');
        }
    });
}

出于测试原因，我需要删除PHP位，但您可以看到它基本上正常工作：

http://jsfiddle.net/QVHhw/

可能导致问题的是PHP变量替换您通过jQuery进行的更改。您正在操作客户端和服务器端的输入值。