Javascript 需要在多个Div Box onClick上使用函数

Javascript 需要在多个Div Box onClick上使用函数,javascript,jquery,html,Javascript,Jquery,Html,这只适用于IE。 我在下面有一个函数,它在单击div时复制div的内容。它很好用。它使用了getElementById。 我有19个项目,我想用这个选项1-选项19。 不必创建19个变量,还有其他方法吗。。。 我完全不知道这件事 function CopyToClip() { var Cdiv = document.getElementById('option1'); Cdiv.contentEditable = 'true'; var controlRange;

这只适用于IE。 我在下面有一个函数,它在单击div时复制div的内容。它很好用。它使用了getElementById。 我有19个项目,我想用这个选项1-选项19。 不必创建19个变量,还有其他方法吗。。。 我完全不知道这件事

function CopyToClip() {
    var Cdiv = document.getElementById('option1');
    Cdiv.contentEditable = 'true';
    var controlRange;
    if (document.body.createControlRange) {
        controlRange = document.body.createControlRange();
        controlRange.addElement(Cdiv);
        controlRange.execCommand('Copy');
    }
    div.contentEditable = 'false';
}
我应该提到这些身份证是给div的。 这些div是基于下拉选择的显示/隐藏。 下拉列表具有打开功能,可显示所选div。 功能是:

$(window).load(function () {
    $(document).ready(function () {
        $('.block').hide();
        $('#option1').show();
        $('#selectField').change(function () {
            $('.block').hide();
            $('#' + $(this).val()).fadeIn();
        });
    });
});
我的HTML是:

<div class="col_1">
    <h1>communication:</h1>
    <div class="box">
  <select id="selectField" style="padding-left: 20px;width:175px">
 <option value="option1">Device Shipped to ASC</option>
 <option value="option2">Device Received at ASC</option> 
 <option value="option3">ASC Shipped Device to Store</option> 
 <option value="option4">Device Pick-up Follow-up</option>
 <option value="option5">Device Pick-up Final Reminder</option>
 <option value="option6">Impress Phase Direct Feedback</option>
 <option value="option7">Abandon Notice</option>
 <option value="option8">Mailer Shipped to Client</option>
 <option value="option9">Mailer Received by Client</option>
 <option value="option10">Mailer Pick-up Notice</option>
 <option value="option11">Mailer Final Pick-up Notice</option>
 <option value="option12">Mailer Failed to Pick-up</option>
 <option value="option13">Mailer Return Defective Device Notice</option>
 <option value="option14">Mailer Final Return Defective Device Notice</option>
 <option value="option15">Mailer Failed to Return Defective Device</option>
 <option value="option16">Mailer Defective Device Received at ASC</option>
 <option value="option17">Mailer Charges to Customer</option>
 <option value="option18">Mailer Process Confirmation</option>
 <option value="option19">Quote Un-replied</option>
 </select>

<div id="option2" class="block" style="background-color:white" onClick="javascript:CopyToClip()"> blah </div>
我有19个这样的分区。
我不知道这是否有帮助。。。很抱歉,我在这件事上有点不知所措。

我最近一直在做类似的事情。我应该根据选择显示/隐藏DIV。生成HTML代码,可以生成1到8个select,每个依赖div显示在其select下。我想到了这个

代码的后半部分基本上会找到所有具有给定ID的select元素,通过它们循环,并根据所选的值显示或隐藏div。我必须使用此选择器:$'*[ID*=delegate\u form]'和$'*[id*=show_hidden_delegate',因为如果我使用$delegate_表单,代码只会影响索引为0的元素。我不知道为什么


代码的前半部分在只读页面上处理相同的情况。

我不得不稍微修改一下,你的剪贴板代码无法在所有浏览器上运行:

JSFiddle:
我自始至终都添加了注释。希望这会有所帮助。

注意:文档就绪事件处理程序不属于稍后发生的窗口加载处理程序中。您是否也可以提供示例HTML以允许完整的答案?您不能通过遍历DOM树来枚举元素并按顺序将函数附加到它们的onclick属性?对于这可能是您所需要的一切。@IvyLynx:在jQuery中,您永远不会迭代来连接事件处理程序!@TrueBlueAussie是这样的?jQuery如何在内部附加这些处理程序?显示/隐藏工作正常。我需要的是复制函数,以便在每个div被复制时,按照我的要求对其进行处理。复制函数使用一个变量,即div的Id、 因此,按原样使用函数时,我需要创建19个变量,然后为每个变量更正脚本。试图找到一种简单的方法来实现这一点……我不能使用getElementByClass,因为我使用的是iE8,它确实支持该类。@user3837156:您不需要将getElementByClass与jQuery一起使用。类选择器将与iE8一起使用。您可以尝试与我们联系以与我类似的方式设置选择器。类似于这样的方式,并在每个循环中使用它。然后,您可以为包含选项的每个元素添加功能。您太棒了!!!!这非常好。我最后问了一个问题…默认情况下是否有加载选项1的方法?解决了它…只添加了一行:$+$'selectField'。val.show;谢谢谢谢你的帮助!!!
function CopyToClip($div) {
    var div = $div[0];
    div.contentEditable = 'true';
    var controlRange;
    if (document.body.createControlRange) {
        controlRange = document.body.createControlRange();
        controlRange.addElement(div);
        controlRange.execCommand('Copy');
        alert("Copied: " + div.html());
    }
    div.contentEditable = 'false';
}

$(function () {
    // Hide copy button
    $('#copy').hide();
    // Hide all content divs
    $('.content').hide();

    $('#selectField').change(function () {
        // Show the copy button
        $('#copy').show();
        // Hide all content divs
        $(".content").fadeOut();
        // Show the select content div
        $('#' + $(this).val()).fadeIn();
    });
    $('#copy').click(function(){
        // Get the div the current selection points to
        var $div = $('#' + $('#selectField').val());
        // Copy the div to the clipboard
        CopyToClip($div);
    });

});