我想從一個輸入值

Question

加載的iframe源這裏是我的jQuery

$(".load-link").click(function() { 
    $link = $('.sermon-link').val(); 
    $(".embed-responsive-item").attr("src", '" + link + "'); 
}); 

這是我的HTML代碼。

<div class="form-group"> 
    <label>Youtube Video Link</label> 
    <div class="input-group"> 
    <div class="input-group-addon"> 
     <i class="fa fa-unlink"></i> 
    </div> 
    <input type="text" class="sermon_link form-control pull-right" name="sermon_link" value="$sermon_link" placeholder="https://youtu.be/pZT-FZqfxZA" /> 
    <span class="input-group-btn"> 
       <button class="load-link btn btn-success" type="button">Preview</button> 
      </span> 
    </div> 
    <!-- /.input group --> 
</div> 
<!-- /.form group --> 

<!-- 4:3 aspect ratio --> 
<div class="thumbnail" style="background: url('assets/img/video_shot_placeholder.png'); background-style: cover;"> 
    <div class="embed-responsive embed-responsive-4by3"> 
    <iframe class="embed-responsive-item"></iframe> 
    </div> 
</div> 

在點擊預覽插件，將IFRAME SRC將加載預覽視頻

Answer 1

這實際上是我在找的東西。我打電話給了錯誤的ID，但我已經糾正了這個問題。

$(".thumbnail").hide(); 
$(".load-link").click(function() { 
    $(".thumbnail").slideDown(); 
    $link = $('.sermon_link').val().replace("https://youtu.be/", "https://www.youtube.com/embed/"); 
    $(".embed-responsive-item").attr("src", $link); 
}); 

Answer 2

你有變種的錯誤引用，你不需要添加周圍的引號：

.attr("src", $link); 

爲了使它更通用的，你可以這樣做：

$(".load-link").click(function() { 
    var $link = $(this).parent().siblings('.sermon-link').val(); 
    $(this).closest('.form-group') 
      .next('.thumbnail') 
      .find(".embed-responsive-item").attr("src", $link); 
}); 

Answer 3

$link = $('.sermon-link').val(); 

改爲：

var link = $('.sermon-link').val();