javascript - 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 函数“成功”，但它正在运行，因为状态正在改变。当我开始并且没有按下任何东西时，一切正常，但是当一个已经按下并且我按下另一个之前的项目状态不会更改为关闭。

有人可以帮助我吗？

谢谢。

总计的：

<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 来自数据库中的记录，该记录保持良好的值

score 0 · Accepted Answer

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

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");

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

score 0 · Accepted Answer

使您的代码更短，并且只使用 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 所做的更改。您正在处理客户端和服务器端的输入值。

javascript - JQuery没有根据条件显示元素

2 回答 2

Related

Reference