使用 cookie 插件从图像点击触发复选框点击

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;*/}

可以看jsfiddlehere

Answer 1

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

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 - 立即检查正确的复选框

这里是a working example on jsfiddle。顺便说一句，我绝对提倡使用 jQuery 进行这种编码，因为它确实可以通过使用 CSS 选择器来加快编码速度，defo check it out here。希望对您有所帮助！