Question

是否可以将.load文本交换为可由用户使用表单输入或类似内容编辑的文本？基本上我正在尝试编写一个代码，该代码使用div ID（每个emp唯一）来获取信息，这些ID在多个HTML文档中的表中保存多年。

示例：

.load('day.html #empId')

.load的“day”和“empid”部分可以在用户端更改。

[Link] [ID]提交

然后它运行脚本的其余部分。

我试图调整的脚本部分：

            $('a').click(function() {
                $('#metrics').load('day.html #empId', function() {
                    $(this).hide()
                            .appendTo('#main')
                            .slideDown(500);
                    });

                    return false;
            })
        });

我不确定我是否清楚地解释了它（jquery的新手）

Answer 1

获取两个表单选择元素的选定选项，组合成字符串并将它们插入到jQuery .load函数中。

$('a').click(function() {
    var ds = $('#datasources option:selected').text();
    var empId = $('#empIds option:selected').text();
    $('#metrics').load(ds + '.html #' + empId, function() {
        $(this).hide()
        .appendTo('#main')
        .slideDown(500);
    });

    return false;
});

HTML受影响：

<div id="main">
        <h1 id="metrics">Metrics</h1>
</div>

JSFiddle：http://jsfiddle.net/a8dTR/（打开控制台看看会发生什么。这会产生错误，因为加载不会对JSFiddle起作用，但你可以看到它的发送正确的论点。）

Answer 2

固定它!!!!!!我很确定它的糟糕做法，但它完成了工作（尝试使用多个文档和ID）。如果有人有更好的方式建议我都是耳朵

我知道这是非常简单和基本的，但这是代码以防其他人想要做类似的事情

我放回$<'div id= metrics'/>以便在附加到#main

的新div标签中打开它

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function () {

$('a').click(function() {
var pD = $('#period').val();
var wD = $('#week').val();
var dD = $('#day').val();
var eD = $('#empId').val();
    $('<div id"metrics" />').load(
              pD
            + wD
            + dD    
            + eD, function(){
        $(this).hide()
                .appendTo('#main')
                .slideDown(1000);
    });

});

});
</script>

然后我从函数中移除了.html #，并将其作为值添加到#empId选项

<form>
<select class="dates" id="period">
    <option value="p00"class="emp">Period</option>
    <option value="p01">1</option>
    <option value="p02">2</option>
    <option value="p03">3</option>
    <option value="p04">4</option>
    <option value="p05">5</option>
    <option value="p06">6</option>
    <option value="p07">7</option>
    <option value="p08">8</option>
    <option value="p09">9</option>
    <option value="p10">10</option>
    <option value="p11">11</option>
    <option value="p12">12</option>
    <option value="p13">13</option>
    <option value="p14">14</option>
</select>
 <select class="dates" id="week">
    <option Value="w00"class="emp">Week</option>
    <option value="w01">1</option>
    <option value="w02">2</option>
    <option value="w03">3</option>
    <option value="w04">4</option>
    <option value="w05">5</option>
    <option value="w06">6</option>
</select>
 <select class="dates" id="day">
    <option value="d00"class="emp">Select Day or Leave Blank for Week</option>
    <option value="d01">1</option>
    <option value="d02">2</option>
    <option value="d03">3</option>
    <option value="d04">4</option>
    <option value="d05">5</option>
    <option value="d06">6</option>
    <option value="d07">7</option>
</select>
<select id="empId">
 <option class="emp">Employee ID</option>
 <option value=".html #JXS0001">John Smith</option>
</select>

<a href="#">Load Metrics</a>
</form>

</div>

<div id="main">
<h1>Metrics</h1>

</div>

我还有很多需要做的事情（例如让emp id动态和可以从单独的html编辑）但这是有趣的部分（我知道怎么哈哈）。感谢百万人帮助这个新人@bloodyKnuckles

使用用户输入更改.load

2 个答案: