如何通过其他HTML元素更新“可选择编辑的值”

问题描述 投票:0回答:2

我有一个具有zoom-inzoom-outzoom-by功能的Web应用程序,我已如下实现:

HTML

<ul class="canvas-zoom">
    <li id="id_zoom_in"><span class="icon-Icon-ZoomIn"></span><span class="lblText">Zoom In</span></li>
    <li id="id_zoom_out"><span class="icon-Icon-ZoomOut"></span><span class="lblText">Zoom Out</span>
    </li>
    <li>
        <div class="select-editable">
            <select id="id_zoom_select" class="zoom-combo-box" >
                <option value="25">25%</option>
                <option value="50">50%</option>
                <option value="66">66%</option>
                <option value="75">75%</option>
                <option value="100">100%</option>
                <option value="Fit" selected>Fit</option>
            </select>
            <input type="text" id="id_zoom_text" value="" maxlength="4" />
        </div>

        <span class="lblText">Zoom By</span>
    </li>
</ul>

JS

  zoom: function (event) {
        var textElem = $('.canvas-zoom #id_zoom_text'),
            selectElem = $('.canvas-zoom #id_zoom_select');

        if (this.id == "id_zoom_in") {

            var zoom_in = parseInt(textElem.val()) + 10;
            console.log("value of zoom is : " + zoom_in );
            textElem.val(zoom_in + "%");
            selectElem.val(zoom_in);
            console.log("value of zoom by should be : " + textElem.val());
            textElem.trigger('change');
        }
        else if (this.id == "id_zoom_out") {
            var zoom_out = parseInt(textElem.val()) - 10;
            console.log("value of zoom is : " + zoom_out );
            textElem.val(zoom_out + "%");
            selectElem.val(zoom_out);
            textElem.trigger('change');
        }
        else if (this.id == "id_zoom_select") {
            var zoomValue = $(this).val();
            textElem.val(zoomValue + "%");
            textElem.trigger('change');
        }
        else if (this.id == "id_zoom_text") {
            var percent = textElem.val();
            //validate the input text
            if (/^[0-9%]+$/.test(percent) && percent.indexOf("%") !== 0) {
                var symbolCount = percent.match(/%/g) || [].length;
                //append % if only numeric is entered
                if (symbolCount == 0)
                    textElem.val(percent + "%");
                percent = parseInt(percent);
                if (percent < ZOOM_MIN)
                    percent = ZOOM_MIN;
                //else if (percent > ZOOM_MAX)
                //    percent = ZOOM_MAX
            }
            else
                percent = ZOOM_MAX;

            textElem.val(percent + "%");
            selectElem.val(percent);
            ContentEditor.setCanvasArea(percent);

        }
    }

我可以像这样从zoom-by中选择缩放百分比:

enter image description here

但是,当我按下zoom-inzoom-out时,zoom-by文本不会更新,除非放大/缩小百分比与html代码[25,50,66,75,100, "Fit"]中的预设选项之一一致

enter image description here

我能够添加一些console.log以确认如果放大/缩小百分比不是预设之一,则放大中的文本不会改变。理想情况下,我希望如果zoom-in将缩放百分比提高到72%,则zoom-by文本应显示该值而不是空白,如屏幕截图所示。

有没有一种方法可以实现我想要的功能?预先感谢!

javascript html
2个回答
0
投票
您可以使用CSS和jQuery缩放过程

/* scale : 1 is no zoom */ function zoomElement(element, scale){ var originZoom = parseInt($(element).css("transform").match(/scale\ +\((\d)\)/m) || 1); var originWidth = $(element).width / originZoom; var originHeight = $(element).height / originZoom; $(element).css({ transform:"scale("+scale+")", "transform-origin":"left top", width: (100/scale)+"%", height:(originHeight/scale)+"px" }); } function zoom(z){ zoomElement($("div"),z); }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="zoom(.5)">0.5</button>
<button onclick="zoom(1)">1</button>
<button onclick="zoom(2)">2</button>
<button onclick="zoom(5)">5</button>
<div style="">
Hello World. This is zoom text example
</div>
我只能提出这个建议-希望它正是您要的东西。为了避免错误,我运行了一些if语句,以确保在整个过程中缩放值都很重要。检查JSFiddle here

$(function(){ // Get all Zoom Controls var zoomInElement = $("#id_zoom_in"); var zoomOutElement = $("#id_zoom_out"); var zoomByElement = $("#id_zoom_select"); var zoomValueTextElement = $("#id_zoom_text"); function getZoomValue(){ return zoomValueTextElement.attr("value"); } function setZoomValue(value){ zoomValueTextElement.attr("value", value); } zoomByElement.on('change', (e)=>{ setZoomValue(e.target.value); } ); zoomInElement.on('click', ()=>{ // First Get the current Value var tempVal = getZoomValue(); // Esnure that before performing any calculations, the current zoomvalue is not "Fit" if(tempVal != "Fit") { tempVal = parseInt(tempVal); //Before you increase by 10, ensure that the zoom is not at 100% if(tempVal <= 100) { // Then increase tempVal += 10; //Check if the zoom is not over 100% after incrementing by 10 if(tempVal > 100) { // then set the zoom to Max tempVal = "Fit"; } } } setZoomValue(tempVal.toString()); }); zoomOutElement.on('click', ()=>{ // First Get the current Value var tempVal = getZoomValue(); // Esnure that before performing any calculations, the current zoomvalue is not "Fit" if(tempVal != "Fit") { // Convert value to integer tempVal = parseInt(tempVal); //Before you derease, ensure that the zoom is not less than 0% if(tempVal > 0) { // Then decrease by 10 tempVal -= 10; //Check if the zoom is not below 0% after decreasing by 10 if(tempVal < 0) { // then set the zoom to Max tempVal = 0; } } }else{ tempVal = 100; } setZoomValue(tempVal); }); });
.zoom-button{
  display: block;
  padding: 15px;
  width: 120px;
  border: thin solid #e1e1e1;
  margin: 10px 0;
  cursor: pointer;
}

.zoom-button:hover{
  background-color: #f5f5f5;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="canvas-zoom">
	<li id="id_zoom_in" class="zoom-button"><span class="icon-Icon-ZoomIn"></span><span class="lblText">Zoom In</span></li>
	<li id="id_zoom_out" class="zoom-button"><span class="icon-Icon-ZoomOut"></span><span class="lblText">Zoom Out</span>
	</li>
	<li>
		<div class="select-editable">
			<select id="id_zoom_select" class="zoom-combo-box" >
				<option value="25">25%</option>
				<option value="50">50%</option>
				<option value="66">66%</option>
				<option value="75">75%</option>
				<option value="100">100%</option>
				<option value="Fit" selected>Fit</option>
			</select>
		</div>
		<span class="lblText">Zoom By</span>
	</li>
  <li>Current Zoom Value: 
			<input type="text" id="id_zoom_text" value="Fit" maxlength="4" /></li>
</ul>

0
投票
我只能提出这个建议-希望它正是您要的东西。为了避免错误,我运行了一些if语句,以确保在整个过程中缩放值都很重要。检查JSFiddle here

© www.soinside.com 2019 - 2024. All rights reserved.