jquery - 在单选上获取 img 标签的 src

Question

我有一些 HTML 代码如下:

<div id="input-option227">
    <div class="radio">
        <label>
            <input type="radio" name="option[227]" value="17" />
            <img src="http://localhost/upload/image/cache/catalog/demo/canon_eos_5d_1-50x50.jpg" alt="black" class="img-thumbnail" />
            black
        </label>
    </div>
    <div class="radio">
        <label>
            <input type="radio" name="option[227]" value="18" />
            <img src="http://localhost/upload/image/cache/catalog/demo/apple_logo-50x50.jpg" alt="green" class="img-thumbnail" />
            green
        </label>
    </div>
</div>

当我选择单选按钮时，我想获取 img src 意味着当单选值为 17 时，我想提醒:

http://localhost/upload/image/cache/catalog/demo/canon_eos_5d_1-50x50.jpg

当值为 18 时，警报应为:

http://localhost/upload/image/cache/catalog/demo/apple_logo-50x50.jpg

到目前为止我所做的是:

$(document).ready(function() {
    $('input:radio[name="option[227]"]').change(function() {
        if ($(this).val() == '17') {
            alert('type A');
        }
        if ($(this).val() == '18') {
            alert('type B');
        }
    });
}); 

我该怎么办？

Answer 1

请看一下这段代码。我使用 $.closest 和 $.find 来定位与单选按钮关联的 img 标签。

$(document).ready(function(){
    $('input:radio').change(function() {
        var closestLable = $(this).closest("label");
        var imgTag =  closestLable.find("img.img-thumbnail");
        var src = imgTag.attr("src");
        alert(src);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="input-option227">
                                <div class="radio">
                  <label>
                    <input type="radio" name="option[227]" value="17" />
                    <img src="http://localhost/upload/image/cache/catalog/demo/canon_eos_5d_1-50x50.jpg" alt="black" class="img-thumbnail" /> black                                      </label>
                </div>
                                <div class="radio">
                  <label>
                    <input type="radio" name="option[227]" value="18" />
                    <img src="http://localhost/upload/image/cache/catalog/demo/apple_logo-50x50.jpg" alt="green" class="img-thumbnail" /> green                                      </label>
                </div>
                              </div>
            </div>