如何在div元素的单击事件之后基于div元素的textContent打开一个窗口?

时间:2014-08-23 02:55:36

标签: javascript

我在我的javascript中使用switch case在根据textContent单击div元素后打开一个窗口。 div元素嵌入在Aspnet的listview控件中。当我点击div元素时,switch函数将我带到默认部分,而alert函数实际显示了该问题 以下是我的javascript

function select(xx) {
if (xx != null) {
switch (xx.textContent){
case "Stock Receipt":
window.open("ReceipPg.aspx", "DescriptiveWindowName", "resizable=yes,scrollbars=yes,status=yes");
break;
case "Stock Issues":
Window.open("Issuetoc.aspx", "DescriptiveWindowName", "resizable=yes,scrollbars=yes,status=yes");
break;
case "Stocktaking Counts":
window.open("StockTak.aspx", "DescriptiveWindowName", "resizable=yes,scrollbars=yes,status=yes");
break;
default: Alert(xx.textContent)
    }

}

我的标记

 <asp:ListView ID="lvtSelected"
    DataSourceID="srcSubM"
    ItemPlaceholderID="ItemPlaceholderID2"
    OnPreRender="lvtSelected_PreRender"
    runat="server"
    OnItemDataBound="lvtSelected_ItemDataBound">
    <LayoutTemplate>
    <table>
    <tr>
    <asp:PlaceHolder ID="ItemPlaceholderID2" runat="server"></asp:PlaceHolder>
    </tr>
    </table>
      </LayoutTemplate>
      <ItemTemplate>
      <tr>
      <td style="background-color:#ccccff; border:solid thin black;">
      <div id="div1" class="a"
      onclick="select(this);"
      onmouseover="over(this)" onmouseout="out(this)"
      style="background-color:#ccccff; 
      border:solid thin black; width:100px;"><%#Eval("MChld") %>
      </div>
      </td></tr>
      </ItemTemplate>

      </asp:ListView>

3 个答案:

答案 0 :(得分:0)

问题似乎不在switch案例中,而在xx.textContent,我做了一个工作正常的测试用例。

function select(xx) {
    if (xx != null) {
        switch (xx.textContent){
            case "Stock Receipt":
            document.getElementById("result").innerHTML = "Stock Receipt"
            break;

            case "Stock Issues":
            document.getElementById("result").innerHTML = "Stock Issues"
            break;

            case "Stocktaking Counts":
            document.getElementById("result").innerHTML = "Stock Counts"
            break;
            default: alert(xx.textContent);

        }
    }
}

var xx = {textContent : "Stock Receipt"}
select(xx);

DEMO

答案 1 :(得分:0)

切换概念很好,问题是你的文字之间的

<div> YourTextHere
</div>

之后有一个返回,因此它在交换机上没有匹配。请参阅此演示文稿:http://jsfiddle.net/z8v25vcj/3/

您需要将</div>移到<%#Eval("MChld") %>之后:

<%#Eval("MChld") %></div>

或者您需要从xxx.textContent

中删除尾随返回和空格

答案 2 :(得分:0)

将您的switch语句更改为:

switch (xx.textContent.trim()){

这将消除由于数据格式而产生的额外新行。