Question

我正在设计一个需要将一组ID发布到php脚本的页面。

有一个表可以选择多个项目（包含相关图像）。老学校会在每个项目旁边放一个复选框并发布表格，然后用php循环浏览表格。

但是设计要求＆＃34;不使用复选框＆＃34;。这个想法是，当用户点击其中一个项目时，该项目在CSS中突出显示，然后一个按钮将发布所有突出显示的项目。

html看起来像这样：

<td>
    <table id="cell-5" class="change_back" onclick="checkItem('cell-5',5);"> 
        <tr>
            <td>
                <img src="img/5.png" />
            </td>
        </tr>
    </table>
</td>
<td>
    <table id="cell-6" class="change_back" onclick="checkItem('cell-6',6);"> 
        <tr>
            <td>
                <img src="img/6.png" />
            </td>
        </tr>
    </table>
</td>
<td>
    <table id="cell-7" class="change_back" onclick="checkItem('cell-7',7);"> 
        <tr>
            <td>
                <img src="img/7.png" />
            </td>
        </tr>
    </table>
</td>

使用Javascript：

function checkItem(clicked, prdId){
    alert(prdId + ' was selected');
    var cur = document.getElementById(clicked).className;

    //if not highlighted
    if (cur == 'change_back'){
        //add item
        document.getElementById(clicked).className = 'change_back_clicked';
    }
    else{
        //remove item
        document.getElementById(clicked).className = 'change_back';
    }
}

css：

.change_back {
    background-color: #FFFFFF;  
}
.change_back:hover {
    cursor: pointer;
}
.change_back_clicked {
    background-color: #C0C0C0;  
}

如何在没有jquery的情况下使用？

进行思考

Answer 1

＆＃13;

$id = array_shift(explode('.', $_SERVER['HTTP_HOST']));

＆＃13;

var group = document.getElementById("group"),
  elements = group.getElementsByTagName("div");

group.addEventListener("click", function(e) {
  e.preventDefault();

  if ("DIV" === e.target.tagName) {
    if ("selected" === e.target.className) {
      e.target.classList.remove("selected");
    } else {
      e.target.classList.add("selected");
    }
  }
});

＆＃13;

#group div {
  cursor: pointer;
}

.selected {
  background-color: #C0C0C0;
}

＆＃13;

Answer 2

好吧，我可能没有非常清楚地解释我想要的东西，所以选择我自己的解决方案：

javascript：

function checkItem(clicked, Id){
    //clicked is the table element that was clicked 
    //Id is the id of the hidden var

    //get the current css class of the table element
    var cur = document.getElementById(clicked).className;

    //flip the css class and update form
    if (cur == 'primaryCl')
    {
        document.getElementById(clicked).className = 'secondaryCl';

        //set form var to 'true' for form post
        document.getElementById(Id).value = 'true';
    }
    else
    {
        //reverse of the above
        document.getElementById(clicked).className = 'primaryCl';
        document.getElementById(Id).value = 'false';
    }
}

CSS：

.primaryCl {
    background-color: #E6E6E6;  
    border-collapse: separate;
    border-spacing: 5px;
    border:solid #6A6964 1px;
    padding: 0px; 
}
.primaryCl:hover {
    background-color: #3cb0fd;  
    cursor: pointer;
}
.secondaryCl {
    background-color: #3cb0fd;  
    border-collapse: separate;
    border-spacing: 5px;
    border:solid #6A6964 1px;
    padding: 0px; 
}

php：

/* css class set dynamically (code removed for brevity) */
$ibClass = "primaryCl";

/* hidden set dynamically (code removed for brevity) */
$hiddenTag = "<input type=\"hidden\" name=\"tp_$Id\" id=\"tp_$Id\" value=\"$hiUpd\">";


/* inside while loop, looping through query results */
$out .= "
  <td>
    $hiddenTag
    <table id=\"cp_$Id\" class=\"$ibClass\" onclick=\"checkItem('cp_$Id', 'tp_$Id');\"> 
        <tr>
            <td>
                <img alt=\"pic\" height=\"70\" width=\"60\" src=\"$thumbnailDir/$imageMini\" />
            </td>
            <td>
                <span class=\"b12\">$prodName</span>
            </td>
        </tr>
    </table>
</td>";

没有复选框的表单帖子的id的javascript集合

2 个答案: