2016-08-29 5 views
1

Я хотел бы изменить iframe src url из щелчка кнопкой начальной загрузки. Javascript код работает с традиционной кнопкой, но что-то идет не так, когда я использую один и тот же код, чтобы изменить IFRAME с JQuery: (я также хотел бы, чтобы IFRAME получить случайные на странице загрузке)Изменить содержимое iframe с помощью кнопки Bootstrap и jquery

бутстраповского элемент (HTML страница)

... 
<div class="col-md-6"> 
    <a class="btn btn-primary" id="randomize">sekvanta ekzerco</a> 
</div> 

<div> 
    <iframe id="question" src="url0" width="275" 
          height="650" frameborder="0" allowfullscreen="allowfullscreen"> 
</iframe> 
</div> 

... 
    <script src="application.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
    </body> 

application.js

var sources = new Array() 

sources[0] = 'url0' 
sources[1] = 'url1' 
sources[2] = 'url2' 
sources[3] = 'url3' 

var p = sources.length; 

$(document).ready(function(){ 
    var randomSource = Math.round(Math.random()*(p-1)); 
    $('#question').attr('src', 'sources[randomSource]'); 
} 

$('#randomize').click(function() { 

    var randomSource = Math.round(Math.random()*(p-1)); 
    $('#question').attr('src', 'sources[randomSource]'); 
} 
+1

Удалить одиночные кавычки Arround в 'источников [randomSource]'. – DanFromGermany

+0

Что вы подразумеваете под: «Код javascript работает с традиционной кнопкой»? – Jorgeblom

ответ

1

Вы можете удалить единственный Quot es от sources[randomSource], поскольку браузер интерпретирует его как литерал, а не оценивает выражение.

$('#question').attr('src', sources[randomSource]); 

Полный фрагмент кода:

var sources = new Array() 
 

 
sources[0] = 'url0' 
 
sources[1] = 'url1' 
 
sources[2] = 'url2' 
 
sources[3] = 'url3' 
 

 
var p = sources.length; 
 

 
$('#randomize').click(function() { 
 
    var randomSource = Math.round(Math.random()*(p-1)); 
 
    console.log(sources[randomSource]); 
 
    $('#question').attr('src', sources[randomSource]); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 

 
<button id="randomize"> 
 
Click me 
 
</button> 
 

 
<div id="question"> 
 
</div>

JSFiddle демонстрирует версию Bootstrap.

https://jsfiddle.net/fz6yythy/

Смежные вопросы