JQuery Var Возвращено как объект - PullRequest
Новая
       6

JQuery Var Возвращено как объект

0 голосов
/ 09 января 2011

Я пытаюсь передать переменную из одной функции в другую, но var elmId возвращается как объект и выдает ошибку.Когда мы щелкаем по любому из сгенерированных элементов div, мы можем изменить размер элемента div, выбрав значение ширины / высоты в раскрывающихся меню.

Я пытаюсь передать выбранный идентификатор div, который является elmId, для функции displayVals, но он не работает.Если мы заменим «#» + elmId в функции displayVals фактическим идентификатором первого созданного элемента div с «# divid1», то это сработает.Почему значение var elmId не передается в displayVals 

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/themes/base/jquery-ui.css" type="text/css" media="all" /> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js" type="text/javascript"></script>
   <style>
    .aaa{width:100px; height:100px; background-color:#ccc;}
    button{width:100px; height:20px;}    
    </style>

<button class="idiv">div</button>
<select id="width">
    <option>100px</option>
    <option>200px</option>
    <option>300px</option>
</select>
<select id="height">
    <option>100px</option>
    <option>200px</option>
    <option>300px</option>
</select>
<p></p>

<script type="text/javascript">
var divId = 1;

$("button").click(function(){
        var elm = $('<div id=divid' + divId + ' class=aaa></div>');
        elm.appendTo('p');
        divId++;
});

$("p").click(function(e){
    var elmType = $(e.target)[0].nodeName,
    elmId = $(e.target)[0].id;
    return displayVals(elmId);
    });
function displayVals(elmId) {
    var iwidth = $("#width").val();
    var iheight = $("#height").val();
    $("#"+elmId).css({width:iwidth, height:iheight});
    console.log(elmId);
    }

    $("select").change(displayVals);
    displayVals();
</script>

1 Ответ

1 голос
/ 09 января 2011

CSS: 

.divs{width:100px; height:100px; background-color:#ccc;}
button{width:100px; height:20px;}    
.selected{background:#dd0000;}

jQuery: 

<script type="text/javascript">
var divId=1,selecteddiv="";
$("button").click(function(){
    $('p').append('<div id="divid'+divId+'" class="divs"></div>');
    divId++;
});

$(".divs").live("click",function(){
    selecteddiv=$(this).attr('id');
    $(this).addClass('selected');
    return false;
});

function displayVals() {
    if(selecteddiv!=""){
        var iwidth = $("#width").val();
        var iheight = $("#height").val();
        $("#"+selecteddiv).css({width:iwidth, height:iheight});
    }
}

$("select").change(displayVals);
displayVals();
</script>
  • Кнопка создаст divid[X]
  • , поскольку вы генерируете их динамически, что вам нужновам live (так как они не существуют, когда click событие присоединяется к классу .divs)
  • клик по одному из .divs поместит имя ID внутри selecteddiv
  • просто чтобы показать вам, какой из них выбран, класс .selected будет добавлен к этому div
  • , когда вы измените значение, событие .change вступит в действие, а если selecteddiv нетпусто, тогда он изменит ширину и высоту
  • вы можете оставить последнюю строку displayVals();, так как у вас нет созданных div в начале

Надеюсь, это достаточно полезно:)

Ура

G.

...