1

我有 4 个选择框应该执行以下操作：

您应该只能在所有 3 个选择框之间选择一个选项，因此一次只能有一个选择框包含一个值 -现在这部分有效。

不起作用并破坏上述功能的部分： 当您在其中一个选择框中选择一个值时，应将图像附加到一个空 div：每个选择框代表一个人（第一个选择除外）以及何时你选择那个人，他的图像应该出现在 div (#reps) 中。

我该怎么做呢？

这是我的小提琴

<select>
    <option>---</option>
    <option>Office</option>
</select>
<br />
<br />
<select>
    <option>---</option>
    <option>Mark</option>
</select>
<br />
<br />
<select>
    <option>---</option>
    <option>Magnus</option>
</select>
<br /><br />
<select>
    <option>---</option>
    <option>Adii</option>
</select>
<br />
<br />

<div id="reps">

</div>

jQuery：

var a = 'http://woothemes.wpengine.netdna-cdn.com/wp-content/themes/woo/images/team/';
var x = 'mark.jpg';
var y = 'magnus.jpg';
var z = 'adii.jpg';

$('select').eq(0).find('option').eq(1).attr('selected','selected');

$('select').on('change', function () {
    $('select').not(this).val("---");

    //the problem area below that breaks my cod as well, remove to see
    if(this.eq() == 1){
        $('#reps').append('<img src="'a + x'" />');
    }
    else if(this.eq() == 2){
        $('#reps').append('<img src="'a + y'" />');
    }

    else if(this.eq() == 3){
        $('#reps').append('<img src="'a + z'" />');
    }
});
4

4 回答 4

1

在这里，有一些小的 jQuery 错误，我已经修复了它们。

http://jsfiddle.net/2DzUV/64/

var a = 'http://woothemes.wpengine.netdna-cdn.com/wp-content/themes/woo/images/team/';
var x = 'mark.jpg';
var y = 'magnus.jpg';
var z = 'adii.jpg';

$('select').eq(0).find('option').eq(1).attr('selected','selected');

$('select').on('change', function () {
    $('select').not(this).val("---");
    $('#reps').empty();
    //the problem area below that breaks my cod as well, remove to see
    if($(this).index() == 0){        
        $('#reps').append('<img src="'+a+x+'"/>');
    }
    else if($(this).index() == 3){
        $('#reps').append('<img src="'+a+y+'"/>');
    }

    else if($(this).index() == 6){
        $('#reps').append('<img src="'+a+z+'" />');
    }
});

请注意：要找出被更改的 eq 元素，您需要使用该.index()方法。由于<br/>标签，您选择的索引是 0,3 和 6。<br/>标签也被计算在内。如果您需要诸如 0,1,2 之类的索引，则需要<br/>从 html 代码中删除标签:) 并使用 CSS 定位选择框。

于 2013-04-26T11:34:36.750 回答
1

img 标签的字符串 concat 中有错字（缺少一些 + 符号）。

真正的问题是当前元素的搜索，您可以使用is检查当前元素是否是特定的实例

根据选择器、元素或 jQuery 对象检查当前匹配的元素集，如果这些元素中至少有一个与给定参数匹配，则返回 true。

代码：

if ($('select').eq(0).is($(this))) {
    $('#reps').append('<img src="' + a + x + '" />');
} else if ($('select').eq(1).is($(this))) {
    $('#reps').append('<img src="' + a + y + '" />');
} else if ($('select').eq(2).is($(this))) {
    $('#reps').append('<img src="' + a + z + '" />');
}

工作小提琴：http: //jsfiddle.net/IrvinDominin/jjyh5/

于 2013-04-26T11:35:42.797 回答
0

为什么不将图像名称引用到选项值中？

HTML

[...]
<select>
    <option>---</option>
    <option value="adii.jpg">Adii</option>
</select>
[...]

JS

[...]
$('select').on('change', function () {
    $('select').not(this).val("---");
    $('#reps').html('<img src="' + a + $(this).val() + '" />');

});

在这里小提琴：http: //jsfiddle.net/2DzUV/61/

于 2013-04-26T11:36:35.417 回答
-1

Append 在选定的之后添加 html。您是否尝试$('#reps').html('<img src="'a + x'" />');改用？

这是一个例子： http ://api.jquery.com/html/

于 2013-04-26T11:18:05.270 回答