1

Cookie プラグインを使用して、複数のページ 'productlist' にまたがるチェックリストを保持していますが、残念ながら、これを画像ベースのチェックボックス トグルと組み合わせようとすると、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を見ることができます

4

1 に答える 1

2

これをソートする最も簡単な方法は、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);
}

余談ですが、image.src を変更する代わりに、CSS スタイルの切り替えを使用する方が簡単でクリーンな場合もあります。代わりに背景画像のあるクラスを使用することを考えましたか? 次に例を示します。

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

ここで、いくつかのことも追加したことに気付くかもしれません: - updateCookieCookie を更新するかどうかのオプションを提供するブール値パラメーター - 正しいチェックボックスの即時チェック

これはjsfiddle の実例です。余談ですが、この種のコーディングには jQuery を使用することを強くお勧めします。CSS セレクターを使用するとコーディングがスピードアップするからです。ここで確認してください。それが役立つことを願っています！

于 2012-05-29T07:35:59.890 に答える