Question

这仅适用于IE。我有一个下面提到的功能，它会在点击div时复制div的内容。它工作正常。它使用了getElementById。我有19个项目我想用这个...'option1 - option19。不必创建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';
}

我应该提到这些id是为Divs。这些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。我不知道这是否有帮助......对不起，我对这个问题感到非常满意。

Answer 1

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

＆＃34;下半场＆＃34;代码基本上找到具有给定ID的所有select元素，通过它们循环并根据所选值显示或隐藏div。我不得不使用这个选择器：$('*[id*=delegate_form]')和$('*[id*=show_hidden_delegate')，因为如果我使用$("#delegate_form")，代码只影响索引为0的元素。我不知道为什么。

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

Answer 2

我不得不解决一些问题，你的剪贴板代码不适用于所有浏览器：

JSFiddle：http://jsfiddle.net/THU5f/2/

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

});

我在整个过程中都添加了评论。希望这会有所帮助。

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

2 个答案:

JSFiddle：http://jsfiddle.net/THU5f/2/