2016-08-10 2 views
1

하나의 버튼에 두 가지 동작을 할당하는 데 문제가 있습니다. 이미지를 클릭하면 이미지가 변경됩니다. 동작은 버튼이 아니라 이미지를 클릭 할 때만 작동합니다. 버튼 이미지 변경을 클릭하고 조치를 취한 후 코드를 변경하는 방법에 대한 아이디어가 있습니까?하나의 버튼에서 두 동작 (이미지 변경)

<a href="" class="btn btn-gray"> 
       <img src="images/icons/full.png" alt="" ng-click="candidates.setTableType(candidates.tableTypes.ADVANCED)" 
        ng-show="candidates.selectedTableType == candidates.tableTypes.SIMPLE"> 
       <img src="images/icons/full-hide.png" alt="" ng-click="candidates.setTableType(candidates.tableTypes.SIMPLE)" 
        ng-show="candidates.selectedTableType == candidates.tableTypes.ADVANCED"> 
      </a> 

너희들 감사합니다

여기 내 코드입니다!

+0

여기에 간단한 jQuery를 사용할 수 있습니까? – Roysh

답변

0

여기서 <a> 두 개를 사용하고 ng-clickng-show 속성을 각각의 링크로 이동할 수 있습니다.

<a href="" class="btn btn-gray" ng-show="candidates.selectedTableType == candidates.tableTypes.SIMPLE" ng-click="candidates.setTableType(candidates.tableTypes.ADVANCED)"> 
    <img src="images/icons/full.png" alt=""> 
</a> 
<a href="" class="btn btn-gray" ng-click="candidates.setTableType(candidates.tableTypes.SIMPLE)" ng-show="candidates.selectedTableType == candidates.tableTypes.ADVANCED"> 
    <img src="images/icons/full-hide.png" alt="" > 
</a> 
+0

버튼을 클릭하면 잠시 후에 다른 버튼이 사라집니다 (다른 버튼 옆에 잠시 나타나기도합니다). – urqel

+0

@urqel 글쎄, 이것은 브라우저의 'AngularJS'성능과 관련된 것입니다. 어떻게 우리가이 효과를 최소화 할 수 있는지 모르겠습니다. –

+0

@urqel 한가지 가능한 해킹은 버튼의 높이와 동일한 높이의 'div'에있는 두 개의 버튼을 'top : 0'과 'left : 0'으로 'position : absolute'로 배치하는 것입니다. 이런 식으로 두 가지가 모두 위에 나타나고이 효과를 볼 수 없습니다. –

-1

나는 CSS/HTML을 배우는 싫은 일이지만, 자바 스크립트로 문제를 해결할 수 있습니다. link

HTML 코드

<div class="btn" id="myDiv" onClick="bgcol()"><a href="https://www.google.com" target="_blank">LINK</a> </div> 

JS 코드

<script> function bgcol() 
{ 
document.getElementById("myDiv").style.backgroundImage = "url('http://dataduppedings.no/subcube/Colour_Gradients/Cyan-Blue_256x256.png')"; 
/* insert your image here */ 
} </script>