Question

我正在使用cookie插件在多个页面的产品列表中保留一份清单，当我尝试将其与基于图像的复选框切换相结合时，我似乎无法正确启动ChangeBox（CheckBox）方法。我做错了什么？

标记：

<form name="CheckList" action="#">
      <table cellspacing="0" cellpadding="0" border="0">
    <tr>
          <td><img src="images/1.jpg" id="item1" name="checkboximg" alt="" onclick="swapImage('item1'); changeBox('pen1')" /></td>
          <td onclick="swapImage('item1')"> item 1. </td>
        </tr>
    <tr>
          <td><img src="images/1.jpg" id="item2" name="checkboximg" alt="" onclick="swapImage('item2')" /></td>
          <td onclick="swapImage('item2')"> item 2. </td>
        </tr>
    <tr>
          <td><img src="images/1.jpg" id="item3" name="checkboximg" alt="" onclick="swapImage('item3')" /></td>
          <td onclick="swapImage('item3')"> item 3. </td>
        </tr>
    <tr>
          <td><img src="images/1.jpg" id="item4" name="checkboximg" alt="" onclick="swapImage('item4')" /></td>
          <td onclick="swapImage('item4')"> item 4. </td>
        </tr>
  </table>
      <input type="checkbox" id="pen2" value="item1" class="hide" />
      <input type="checkbox" id="pencil2" value="item2" class="hide" />
      <input type="checkbox" id="paper2" value="item3" class="hide" />
      <input type="checkbox" id="eraser2" value="item4" class="hide" />
    </form>

使用Javascript：

//This Function Creates your Cookie for you just pass in the Cookie Name, Value, and number of days before you want it to expire.

function CreateCookie(name, value, days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        var expires = "; expires=" + date.toGMTString();
    }
    else var expires = "";
    document.cookie = name + "=" + value + expires + "; path=/";
}

//This Function reads the value of a given cookie for you.  Just pass in the cookie name and it will return the value.

function ReadCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
}

//This Function Erases Cookies.  Just pass in the name of the cookies you want erased.

function EraseCookie(name) {
    CreateCookie(name, "", -1);
}

//Sets or UnSets Cookies for given checkbox after it's been clicked on/off.

function ChangeBox(CheckBox) {

    if (document.getElementById(CheckBox).checked) {


        //var thisBox = document.getElementById(CheckBox).value;
        //alert(thisBox);
        var CurrentCookie = ReadCookie("productlist");
        CurrentCookie = CurrentCookie + CheckBox;
        CreateCookie("productlist", CurrentCookie, "1000");
    }
    else {
        var CurrentCookie = ReadCookie("productlist");
        CurrentCookie = CurrentCookie.replace(CheckBox, "");
        CreateCookie("productlist", CurrentCookie, "1000");
    }
}

//Runs on body load to check history of checkboxes on the page.

function CheckCookies() {

    var CurrentCookie = ReadCookie("productlist");

    for (i = 0; i < document.CheckList.elements.length; i++) {
        if (document.CheckList.elements[i].type == "checkbox") {
            document.CheckList.elements[i].onclick = function() {
                ChangeBox(this.id);
            };
            if (CurrentCookie && CurrentCookie.indexOf(document.CheckList.elements[i].id) > -1) {
                document.CheckList.elements[i].checked = true;
            }
        }
    }

    //IF COOKIE CHECKED
    if (document.getElementById("pen2").checked == true) {
        swapImage("item1");
    }
    if (document.getElementById("pencil2").checked == true) {
        swapImage("item2");
    }
    if (document.getElementById("paper2").checked == true) {
        swapImage("item3");
    }
    if (document.getElementById("eraser2").checked == true) {
        swapImage("item4");
    }
    else {}
}

//Clears Form

function ClearBoxes() {
    for (i = 0; i < document.CheckList.elements.length; i++) {
        if (document.CheckList.elements[i].type == "checkbox") {
            document.CheckList.elements[i].checked = false;
            ChangeBox(document.CheckList.elements[i].id);
        }
    }
}

window.onload = CheckCookies;

//*********************************IMAGES*********************************//
var imgUp = "images/1.jpg";
var imgDown = "images/2.jpg";
var checkedItems = new Array();

function swapImage(imgID) {
    var theImage = document.getElementById(imgID);
    var theState = theImage.src;

    //*****************CHANGE THE CORRECT CORRESPONDING CHECKBOX **************************//
    var imgBox = document.getElementById(imgID).value;
    //alert(imgBox);
    alert(theImage);


    if (theState.indexOf(imgUp) != -1) {
        theImage.src = imgDown;
    }
    else {
        theImage.src = imgUp;
    }
}

CSS：

input.hide {/*display: none;*/}

你可以看到jsfiddle here

Answer 1

对此进行排序的最简单方法是在 CheckBox 函数中调用 swapImage 函数并传递多个参数。这是一个例子：

function swapImage(imgID, checkboxID) {
    var theImage = document.getElementById(imgID);
    var theState = theImage.src;

    /* CHANGE THE CORRECT CORRESPONDING CHECKBOX */
    var imgBox = document.getElementById(imgID).value;
    //alert(imgBox);
    alert(theImage);


    if (theState.indexOf(imgUp) != -1) {
        theImage.src = imgDown;
    }
    else {
        theImage.src = imgUp;
    }

    /* CALL THE CHANGEBOX FUNCTION */
    ChangeBox(checkboxID);
}

另外，您也可能会发现使用CSS样式切换更容易/更清晰，而不是更改image.src。您是否考虑过使用带背景图像的课程？这是一个例子：

/* CHANGE CLASSES + UPDATE COOKIE - Function formerly called "swapImage" */
function setChecked(divID, checkboxID, updateCookie){
    var theDiv = document.getElementById(divID);
    var theCheckbox = document.getElementById(checkboxID);

    // Toggle Classes/Checkboxes
    if(theDiv.className == "img1"){
        theDiv.className = "img2";
        theCheckbox.checked = true;
    }else{
        theDiv.className = "img1";
        theCheckbox.checked = false;
    }

    // If updateCookie is true change cookie
    if(updateCookie){
        ChangeBox(checkboxID);
    }
}

在这里你可能会注意到我还添加了几件事： - 布尔参数 updateCookie ，您可以选择是否更新Cookie - Immeadiate检查正确的复选框

这是a working example on jsfiddle。顺便说一下，我绝对主张使用jQuery进行这种编码，因为它确实加快了使用CSS选择器defo check it out here的编码速度。我希望有所帮助！

触发使用Cookie插件点击图片的复选框

1 个答案: